CSS3动画详解（图文教程）

原文链接：http://www.cnblogs.com/smyhvae/p/8435182.html

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

前言

本文主要内容：

过渡：transition
2D 转换 transform
3D 转换 transform
动画：animation

过渡：transition

transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

参考链接：补间动画基础

transition 包括以下属性：

transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。属性值可以是：
- linear 线性
- ease 减速
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速后减速
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。

上面的四个属性也可以写成综合属性：

    transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;transition: all 3s linear 0s;

其中，transition-property这个属性是尤其需要注意的，不同的属性值有不同的现象。我们来示范一下。

如果设置 transition-property: width，意思是只让盒子的宽度在变化时进行过渡。效果如下：

如果设置 transition-property: all，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡。效果如下：

案例：小米商品详情

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS 过渡</title><style>body {margin: 0;padding: 0;background-color: #eeeeee;}.content {width: 800px;height: 320px;padding-left: 20px;margin: 80px auto;}.item {width: 230px;height: 300px;text-align: center;margin-right: 20px;background-color: #FFF;float: left;position: relative;top: 0;overflow: hidden; /* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */transition: all .5s; /* 从最初到鼠标悬停时的过渡 */}.item img {margin-top: 30px;}.item .desc {position: absolute;left: 0;bottom: -80px;width: 100%;height: 80px;background-color: #ff6700;transition: all .5s;}/* 鼠标悬停时，让 item 整体往上移动5px，且加一点阴影 */.item:hover {top: -5px;box-shadow: 0 0 15px #AAA;}/* 鼠标悬停时，让下方的橙色方形现身 */.item:hover .desc {bottom: 0;}</style>
</head>
<body>
<div class="content"><div class="item"><img src="./images/1.png" alt=""></div><div class="item"><img src="./images/2.png" alt=""><span class="desc"></span></div><div class="item"><img src="./images/3.jpg" alt=""><span class="desc"></span></div>
</div>
</body>
</html>

效果如下：

动画效果录制的比较差，但真实体验还是可以的。

工程文件：

2018-02-08-小米商品详情过渡

2D 转换

转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。

转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。

在 CSS3 当中，通过 transform 转换来实现 2D 转换或者 3D 转换。

2D转换包括：缩放、移动、旋转。

我们依次来讲解。

1、缩放：`scale`

格式：

    transform: scale(x, y);transform: scale(2, 0.5);

参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。

取值：大于1表示放大，小于1表示缩小。不能为百分比。

格式举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 1000px;margin: 100px auto;}.box div {width: 300px;height: 150px;background-color: pink;float: left;margin-right: 15px;color: white;text-align: center;font: 400 30px/150px “宋体”;}.box .box2 {background-color: green;transition: all 1s;}.box .box2:hover {/*width: 500px;*//*height: 400px;*/background-color: yellowgreen;/* transform:  css3中用于做变换的属性
                scale(x,y)：缩放 */transform: scale(2, 0.5);}</style>
</head>
<body>
<div class="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>
</div></body>
</html>

效果：

上图可以看到，给 box1 设置 2D 转换，并不会把兄弟元素挤走。

2、位移：translate

格式：

    transform: translate(水平位移, 垂直位移);transform: translate(-50%, -50%);

参数解释：

参数为百分比，相对于自身移动。
正值：向右和向下。负值：向左和向上。如果只写一个值，则表示水平移动。

格式举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 1000px;margin: 100px auto;}.box > div {width: 300px;height: 150px;border: 1px solid #000;background-color: red;float: left;margin-right: 30px;}div:nth-child(2) {background-color: pink;transition: all 1s;}/* translate:(水平位移，垂直位移)*/div:nth-child(2):hover {transform: translate(-50%, -50%);}</style></head>
<body>
<div class="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>
</div></body>
</html>

效果：

上图中，因为我在操作的时候，鼠标悬停后，立即进行了略微的移动，所以产生了两次动画。正确的效果应该是下面这样的：

应用：让绝对定位中的盒子在父亲里居中

我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。

可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：

    div {
        width: 600px;
        height: 60px;
        position: absolute;  绝对定位的盒子
        left: 50%;           首先，让左边线居中
        top: 0;
        margin-left: -300px;  然后，向左移动宽度（600px）的一半}

如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。

现在，我们还可以利用偏移 translate 来做，这也是比较推荐的写法：

    div {width: 600px;height: 60px;background-color: red;position: absolute;       绝对定位的盒子left: 50%;               首先，让左边线居中top: 0;transform: translate(-50%);    然后，利用translate，往左走自己宽度的一半【推荐写法】}

3、旋转：rotate

格式：

    transform: rotate(角度);transform: rotate(45deg);

参数解释：正值顺时针；负值：逆时针。

举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 200px;height: 200px;background-color: red;margin: 50px auto;color: #fff;font-size: 50px;transition: all 2s; /* 过渡：让盒子在进行 transform 转换的时候，有个过渡期 */}/* rotate（角度）旋转 */.box:hover {transform: rotate(-405deg); /* 鼠标悬停时，让盒子进行旋转 */}</style>
</head>
<body>
<div class="box">1</div></div>
</body>
</html>

效果：

注意，上方代码中，我们给盒子设置了 transform 中的 rotate 旋转，但同时还要给盒子设置 transition 过渡。如果没有这行过渡的代码，旋转会直接一步到位，效果如下：（不是我们期望的效果）

案例1：小火箭

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>html,body{height:100%;}body{background-color: #DE8910;}.rocket{position: absolute;left:100px;top:600px;height: 120px;transform:translate(-200px ,200px) rotate(45deg);transition:all 1s ease-in;}body:hover .rocket{transform:translate(500px,-500px) rotate(45deg);}</style>
</head>
<body><img  class="rocket" src="images/rocket.png" alt=""/>
</body>
</html>

上方代码中，我们将 transform 的两个小属性合并起来写了。

小火箭图片的url：http://img.smyhvae.com/20180208-rocket.png

案例2：扑克牌

rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想改变旋转的坐标原点，可以用transform-origin属性。格式如下：

    transform-origin: 水平坐标 垂直坐标;transform-origin: 50px 50px;transform-origin: center bottom;   //旋转时，以盒子底部的中心为坐标原点

我们来看一下 rotate 结合 transform-origin 的用法举例。

代码如下：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>body {/*background-color: #eee;*/}.box {width: 300px;height: 440px;margin: 100px auto;position: relative;}img {width: 100%;transition: all 1.5s;position: absolute;     /* 既然扑克牌是叠在一起的，那就都用绝对定位 */left: 0;top: 0;transform-origin: center bottom; /*旋转时，以盒子底部的中心为坐标原点*/box-shadow: 0 0 3px 0 #666;}.box:hover img:nth-child(6) {transform: rotate(-10deg);}.box:hover img:nth-child(5) {transform: rotate(-20deg);}.box:hover img:nth-child(4) {transform: rotate(-30deg);}.box:hover img:nth-child(3) {transform: rotate(-40deg);}.box:hover img:nth-child(2) {transform: rotate(-50deg);}.box:hover img:nth-child(1) {transform: rotate(-60deg);}.box:hover img:nth-child(8) {transform: rotate(10deg);}.box:hover img:nth-child(9) {transform: rotate(20deg);}.box:hover img:nth-child(10) {transform: rotate(30deg);}.box:hover img:nth-child(11) {transform: rotate(40deg);}.box:hover img:nth-child(12) {transform: rotate(50deg);}.box:hover img:nth-child(13) {transform: rotate(60deg);}</style>
</head>
<body>
<div class="box"><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/><img src="images/pk2.png"/><img src="images/pk1.png"/>
</div>
</body>
</html>

效果如下：

4、倾斜

暂略。

3D 转换

1、旋转：rotateX、rotateY、rotateZ

3D坐标系（左手坐标系）

如上图所示，伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。

浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。

旋转的方向：（左手法则）

左手握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余手指卷曲的方向。

从上面这句话，我们也能看出：所有的3d旋转，对着正方向去看，都是顺时针旋转。

格式：

    transform: rotateX(360deg);    //绕 X 轴旋转360度transform: rotateY(360deg);    //绕 Y 轴旋转360度transform: rotateZ(360deg);    //绕 Z 轴旋转360度

格式举例：

（1）rotateX 举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.rotateX {width: 300px;height: 226px;margin: 200px auto;/* 透视 :加给变换的父盒子*//* 设置的是用户的眼睛距离 平面的距离*//* 透视效果只是视觉上的呈现，并不是正真的3d*/perspective: 110px;}img {/* 过渡*/transition: transform 2s;}/* 所有的3d旋转，对着正方向去看，都是顺时针旋转*/.rotateX:hover img {transform: rotateX(360deg);}</style>
</head>
<body>
<div class="rotateX"><img src="images/x.jpg" alt=""/>
</div>
</body>
</html>

效果：

上方代码中，我们最好加个透视的属性，方能看到3D的效果；没有这个属性的话，图片旋转的时候，像是压瘪了一样。

而且，透视的是要加给图片的父元素 div，方能生效。我们在后面会讲解透视属性。

（2）rotateY 举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.rotateY {width: 237px;height: 300px;margin: 100px auto;/* 透视 */perspective: 150px;}img {transition: all 2s;  /* 过渡 */}.rotateY:hover img {transform: rotateY(360deg);}</style>
</head>
<body>
<div class="rotateY"><img src="images/y.jpg" alt=""/>
</div>
</body>
</html>

效果：

（3）rotateZ 举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.rotateZ {width: 330px;height: 227px;margin: 100px auto;/* 透视*/perspective: 200px;}img {transition: all 1s;}.rotateZ:hover img {transform: rotateZ(360deg);}</style>
</head>
<body>
<div class="rotateZ"><img src="images/z.jpg" alt=""/>
</div>
</body>
</html>

效果：

案例：百度钱包

现在有下面这张图片素材：

要求做成下面这种效果：

上面这张图片素材其实用的是精灵图。实现的代码如下：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>body {background-color: cornflowerblue;}.box {width: 300px;height: 300px;/*border: 1px solid #000;*/margin: 50px auto;position: relative;}.box > div {width: 100%;height: 100%;position: absolute;/*border: 1px solid #000;*/border-radius: 50%;transition: all 2s;backface-visibility: hidden;}.box1 {background: url(images/bg.png) left 0 no-repeat; /*默认显示图片的左半边*/}.box2 {background: url(images/bg.png) right 0 no-repeat;transform: rotateY(180deg); /*让图片的右半边默认时，旋转180度，就可以暂时隐藏起来*/}.box:hover .box1 {transform: rotateY(180deg); /*让图片的左半边转消失*/}.box:hover .box2 {transform: rotateY(0deg); /*让图片的左半边转出现*/}</style>
</head>
<body>
<div class="box"><div class="box1"></div><div class="box2"></div>
</div>
</body>
</html>

2、移动：translateX、translateY、translateZ

格式：

    transform: translateX(100px);    //沿着 X 轴移动transform: translateY(360px);    //沿着 Y 轴移动transform: translateZ(360px);    //沿着 Z 轴移动

格式举例：

（1）translateX 举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 200px;height: 200px;background: green;transition: all 1s;}.box:hover {transform: translateX(100px);}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

效果：

（2）translateY 举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 200px;height: 200px;background: green;transition: all 1s;}.box:hover {transform: translateY(100px);}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

效果：

（3）translateZ 举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>body {/* 给box的父元素加透视效果*/perspective: 1000px;}.box {width: 250px;height: 250px;background: green;transition: all 1s;margin: 200px auto}.box:hover {/* translateZ必须配合透视来使用*/transform: translateZ(400px);}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

效果：

上方代码中，如果不加透视属性，是看不到translateZ的效果的。

3、透视：perspective

电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。

格式有两种写法：

作为一个属性，设置给父元素，作用于所有3D转换的子元素
作为 transform 属性的一个值，做用于元素自身。

4、3D呈现（transform-style）

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：

    transform-style: preserve-3d;     //让 子盒子 位于三维空间里transform-style: flat;            //让子盒子位于此元素所在的平面内（子盒子被扁平化）

案例：立方体

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 250px;height: 250px;border: 1px dashed red;margin: 100px auto;position: relative;border-radius: 50%;/* 让子盒子保持3d效果*/transform-style: preserve-3d;/*transform:rotateX(30deg) rotateY(-30deg);*/animation: gun 8s linear infinite;}.box > div {width: 100%;height: 100%;position: absolute;text-align: center;line-height: 250px;font-size: 60px;color: #daa520;}.left {background-color: rgba(255, 0, 0, 0.3);/* 变换中心*/transform-origin: left;/* 变换*/transform: rotateY(90deg) translateX(-125px);}.right {background: rgba(0, 0, 255, 0.3);transform-origin: right;/* 变换*/transform: rotateY(90deg) translateX(125px);}.forward {background: rgba(255, 255, 0, 0.3);transform: translateZ(125px);}.back {background: rgba(0, 255, 255, 0.3);transform: translateZ(-125px);}.up {background: rgba(255, 0, 255, 0.3);transform: rotateX(90deg) translateZ(125px);}.down {background: rgba(99, 66, 33, 0.3);transform: rotateX(-90deg) translateZ(125px);}@keyframes gun {0% {transform: rotateX(0deg) rotateY(0deg);}100% {transform: rotateX(360deg) rotateY(360deg);}}</style>
</head>
<body>
<div class="box"><div class="up">上</div><div class="down">下</div><div class="left">左</div><div class="right">右</div><div class="forward">前</div><div class="back">后</div>
</div>
</body>
</html>

动画

动画是CSS3中具有颠覆性的特征，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

1、定义动画的步骤

（1）通过@keyframes定义动画；

（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；

（3）在指定元素里，通过 animation 属性调用动画。

之前,我们在 js 中定义一个函数的时候，是先定义，再调用：

    js 定义函数：function fun(){ 函数体 }调用：fun();

同样，我们在 CSS3 中定义动画的时候，也是先定义，再调用：

    定义动画：@keyframes 动画名{from{ 初始状态 }to{ 结束状态 }}调用：animation: 动画名称 持续时间；

其中，animation属性的格式如下：

            animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)animation: move1 1s  alternate linear 3;animation: move2 4s;

定义动画的格式举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.box {width: 100px;height: 100px;margin: 100px;background-color: red;/* 调用动画*//* animation: 动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。infinite 表示无限次*//*animation: move 1s  alternate linear 3;*/animation: move2 4s;}/* 方式一：定义一组动画*/@keyframes move1 {from {transform: translateX(0px) rotate(0deg);}to {transform: translateX(500px) rotate(555deg);}}/* 方式二：定义多组动画*/@keyframes move2 {0% {transform: translateX(0px) translateY(0px);background-color: red;border-radius: 0;}25% {transform: translateX(500px) translateY(0px);}/*动画执行到 50% 的时候，背景色变成绿色，形状变成圆形*/50% {/* 虽然两个方向都有translate，但其实只是Y轴上移动了200px。
                因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */transform: translateX(500px) translateY(200px);background-color: green;border-radius: 50%;}75% {transform: translateX(0px) translateY(200px);}/*动画执行到 100% 的时候，背景色还原为红色，形状还原为正方形*/100% {/*坐标归零，表示回到原点。*/transform: translateX(0px) translateY(0px);background-color: red;border-radius: 0;}}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

注意好好看代码中的注释。

效果如下：

2、动画属性

我们刚刚在调用动画时，animation属性的格式如下：

animation属性的格式如下：

            animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)animation: move1 1s  alternate linear 3;animation: move2 4s;

可以看出，这里的 animation 是综合属性，接下来，我们把这个综合属性拆分看看。

（1）动画名称：

    animation-name: move;

（2）执行一次动画的持续时间：

    animation-duration: 4s;

备注：上面两个属性，是必选项，且顺序固定。

（3）动画的执行次数：

    animation-iteration-count: 1;       //iteration的含义表示迭代

属性值infinite表示无数次。

（3）动画的方向：

    animation-direction: alternate;

属性值：normal 正常，alternate 反向。

（4）动画延迟执行：

    animation-delay: 1s;

（5）设置动画结束时，盒子的状态：

    animation-fill-mode: forwards;

属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。

（6）运动曲线：

    animation-timing-function: ease-in;

属性值可以是：linear ease-in-out steps()等。

注意，如果把属性值写成steps()，则表示动画不是连续执行，而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。

steps()的效果

我们还是拿上面的例子来举例，如果在调用动画时，我们写成：

    animation: move2 4s steps(2);

效果如下：

有了属性值 steps()，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。

step()举例：时钟的简易模型

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>div {width: 3px;height: 200px;background-color: #000;margin: 100px auto;transform-origin: center bottom;    /* 旋转的中心点是底部 */animation: myClock 60s steps(60) infinite;}@keyframes myClock {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style>
</head>
<body>
<div></div>
</body>
</html>

上方代码，我们通过一个黑色的长条div，旋转360度，耗时60s，分成60步完成。即可实现。

效果如下：

动画举例：摆动的鱼

现在，我们要做下面这种效果：

PS：图片的url是http://img.smyhvae.com/20180209_1245.gif，图片较大，如无法观看，可在浏览器中单独打开。

为了作出上面这种效果，要分成两步。

（1）第一步：让鱼在原地摆动

鱼在原地摆动并不是一张 gif动图，她其实是由很多张静态图间隔地播放，一秒钟播放完毕，就可以了：

上面这张大图的尺寸是：宽 509 px、高 2160 px。

我们可以理解成，每一帧的尺寸是：宽 509 px、高 270 px。270 * 8 = 2160。让上面这张大图，在一秒内从 0px 的位置往上移动2160px，分成8步来移动。就可以实现了。

代码是：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.shark {width: 509px;height: 270px; /*盒子的宽高是一帧的宽高*/border: 1px solid #000;margin: 100px auto;background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */animation: sharkRun 1s steps(8) infinite; /* 一秒之内，从顶部移动到底部，分八帧， */}@keyframes sharkRun {0% {}/* 270 * 8 = 2160 */100% {background-position: left -2160px; /* 动画结束时，让图片位于最底部 */}}</style>
</head>
<body>
<div class="sharkBox"><div class="shark"></div>
</div></div>
</body>
</html>

效果如下：

我们不妨把上面的动画的持续时间从1s改成 8s，就可以看到动画的慢镜头：

这下，你应该恍然大悟了。

（2）第二步：让鱼所在的盒子向前移动。

实现的原理也很简单，我们在上一步中已经让shark这个盒子实现了原地摇摆，现在，让 shark 所在的父盒子 sharkBox向前移动，即可。完整版代码是：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.shark {width: 509px;height: 270px; /* 盒子的宽高是一帧的宽高 */border: 1px solid #000;margin: 100px auto;background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */animation: sharkRun 1s steps(8) infinite; /* 一秒之内，从顶部移动到底部，分八帧 */}/* 鱼所在的父盒子 */.sharkBox {width: 509px;height: 270px;animation: sharkBoxRun 20s linear infinite;}@keyframes sharkRun {0% {}/* 270 * 8 = 2160 */100% {background-position: left -2160px; /* 动画结束时，让图片位于最底部 */}}@keyframes sharkBoxRun {0% {transform: translateX(-600px);}100% {transform: translateX(3000px);}}</style>
</head>
<body>
<div class="sharkBox"><div class="shark"></div>
</div></div>
</body>
</html>

大功告成。

工程文件如下：

2018-02-09-fishes.rar

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

远场（far-field）语音识别的主流技术有哪些
转自：https://www.zhihu.com/question/48537863以amazon echo为首的一批智能硬件正在崛起，这些硬件实现语音识别功能时面临的一个挑战性的问题就是如何降低远场麦克风造成的噪音（noise）、回声（reverberation）和自回声（echo），希望有大牛来介绍一下这个领域的主流应用技…...
2024/4/30 19:46:40
Fedora Project, extras 目录(进入小心)
rpm包好难找,这里放个目录方便自己,省得每次都进FTP list半天Download Server[ICO] Name Last modified Size[DIR] Parent Directory - [ ] AGReader-1.2-2.fc6.i386.rpm 29-Aug-200…...
2024/4/30 22:02:32
.NET代码生成工具
2018-8-21 09:54:51更新升级版本：详见 https://blog.csdn.net/a497785609/article/details/81810942当前版本1.1.0.0功能概述：1.根据数据库架构生成代码：利用NVelocity模板引擎，支持自定义模板内置标签方法。可以根据个人业务需求，生成任何格式的代码。自定义标签方法放在…...
2024/4/30 20:25:09
音视频参数解析
一、音频指人耳可以听到的声音频率在20Hz~20kHz之间的声波。如果在计算机加上相应的音频卡—就是我们经常说的声卡，我们可以把所有的声音录制下来，声音的声学特性如音的高低等都可以用计算机硬盘文件的方式储存下来。反过来，我们也可以把储存下来的音频文件…...
2024/4/30 19:15:23
Matlab/Simulink 自动代码生成详细步骤
最近一直在忙于FCU控制器的模型搭建，空闲之余也想分享一下自己对Simulink建模过程中的一些想法，从接触simulink到应用simulink大约已经两年多了，随着接触时间，慢慢发现simulink在模型搭建方面真的是非常的方面。今天我就和大家分享一下simulink模型搭建完成时如何进行自动代…...
2024/4/30 18:58:19
大白话之波束成形
波束成形技术介绍 1. 什么是波束？ “波束”我们可能觉得有点抽象，但是“光束”相信大家一定都很熟悉。当一束光的方向都相同时，就成了光束，类似手电筒发出的光。反之，如果光向四面八方辐射（如电灯泡发出的光），则不能形成光束。和光束一样，当所有波的传播方向都一致时，…...
2024/5/1 0:22:31
28、Windows API Shell任务栏通知区域(Tray)图标
使用了通知区域图标的程序应该是图形用户界面的程序，具有窗口,和一般的窗口程序一样，应该创建一个主窗口，并处理窗口消息。一、相关API 1、Shell_NotifyIcon Sends a message to the taskbars status area.[2] 二、示例代码任务栏通知区域(Tray)图标参考 [1] 精通Windows…...
2024/4/30 19:20:17
Flash Media Server 入门教程与新手FAQ合集
什么是Flash Media Server ？Flash大家庭里的一员，这个东东以前叫Flash Communication Server，传说中的FCS就是这个，现在改叫FMS了...不见不知道哦，一见真可怕，adobe还有这么cool的东东，自从见了她，让我做些小东东的兴趣全没了，一心想研究这个这东东能做什么？视频录…...
2024/4/30 3:37:04
java后台框架 springmvc mybaits 集代码生成器 SSM SSH
获取【下载地址】 QQ: 313596790 【免费支持更新】支持三大数据库 mysql oracle sqlsever 更专业、更强悍、适合不同用户群体【新录针对本系统的视频教程，手把手教开发一个模块，快速掌握本系统】A 代码生成器(开发利器); 增删改查的处理类，service层，mybatis的x…...
2024/4/30 23:54:39
软硬整合：开发一款VR大作背后的技术支撑
摘要：在日前举行的GMIC全球VR峰会上，Qualcomm高级产品总监Hugo Swart从移动VR入手分享了Qualcomm在VR方面的软硬整合实践，一方面，以Snapdragon™ 820解决VR对处理能力的高需求，另一方面，推出VR SDK帮助开发者优化应用、简化开发。最近两年，虚拟现实（VR）从初入公众视…...
2024/4/30 16:51:43
第50章读写内部FLASH—零死角玩转STM32-F429系列
第50章读写内部FLASH全套200集视频教程和1000页PDF教程请到秉火论坛下载：www.firebbs.cn 野火视频教程优酷观看网址：http://i.youku.com/firege 本章参考资料：《STM32F4xx 中文参考手册》、《STM32F4xx规格书》、库说明文档《stm32f4xx_dsp_stdperiph_lib_um.chm》。…...
2024/4/30 17:45:08
SSH开源自动生成代码工具，可自动生成action、service、form、dao、model、vo、sqlmap.xml、.hbm.xml、test等
本人只是将最流行的代码生成工具rapid和自动建网站工具jeecms整合，形成了一套属于自己的从代码生成到建站自动化完成。该系统支持ssh,ssi,springmvc等十多种结构代码，可以自动，action、service、form、dao、model、vo、sqlmap.xml、.hbm.xml、test、Jsp、.html、.ftl、.php等…...
2024/4/30 23:57:45
语音算法笔记
[语音增强和语音识别网页书](https://legacy.gitbook.com/book/shichaog1/hand-book-of-speech-enhancement-and-recognition/details)语音处理算法一直处于研究和发展的阶段，随着人工智能的兴起，人工智能的两个入口：语音和视觉正变的越来越重要，这也是未来5~10年各个AI公司…...
2024/4/30 16:21:09
全国教育网DNS(转）
感觉学校 DNS 不稳定。找了几个教育网的。202.114.64.2武大DNS1 （一区） 202.114.96.1 武大DNS2 （二区） 202.114.96.2 武大DNS3 （二区） 202.114.112.13 武大DNS4 （三区） 202.114.0.242 server20.hust.edu.cn华工DNS 202.112.0.35 dns.hust.edu.cn 华工DNS2 202.112.20.1…...
2024/5/1 1:16:21
A-Frame WebVR开发入门教程
WebVR和WebGL应用程序接口使得我们已经可以在浏览器上创建虚拟现实（VR）体验，但从工程化的角度而言，开发社区还需要更多方便强大的开发库来简化编程，Mozilla的 A-Frame 框架就是这样一个工具，提供了一个Web开发者所熟悉的标记语言来快速构建3D VR场景动画原型，而不需要编…...
2024/4/30 18:51:02
在消息栏内添加一个图标，通过自定义消息响应图标
1、在消息栏内添加一个图标很多时候我们要运行一个程序，希望在最小化时隐藏到消息栏内。就像QQ一样。那个这个很有意思的功能是怎么实现的呢？在BCB中一个TNotifyIconData 类。通过设置这个类的属性，调用Shell_NotifyIcon();将图标显示在消息栏内。TNotifyIconData FData;TI…...
2024/4/30 21:51:31
利用UnityEditor实现自己的代码生成器
在写了不少代码之后，才发现以前写的很多代码都是重复性的，虽然这样的重复劳动让程序员形成了自己的代码风格，但一直这样下去并不是十分明智的方式。 -----------------------------------------------------写在前面本文将利用unity的编辑器扩展功能，结合开源的Rotorz列表…...
2024/4/30 18:51:54
各地方DNS
2019独角兽企业重金招聘Python工程师标准>>> 只作为个人参考，备查。 ----------------------------------- 北京 ns.bta.net.cn 202.96.0.133 ns.spt.net.cn 202.96.199.133 ns.cn.net 202.97.16.195 广东 ns.guangzhou.gd.cn 202.96.128.143 dns.guangzhou.gd…...
2024/4/21 8:42:49
关于系统响应函数OnSysCommand及托盘Shell_NotifyIcon()等(转)
void CTestDlg::OnSysCommand(UINT nID, LPARAM lParam) 这个函数响应系统控制菜单的命令.(即左上角图标处)。 OnSysCommand：The framework calls this member function when the user selects a command from the Control menu, or when the user selects the Maximize or th…...
2024/4/25 23:16:21
RDIFramework.NET平台代码生成器V3.0版本全新发布-更新于20160518（提供下载）
最新版本请转到：RDIFramework.NET平台代码生成器V3.1版本全新发布-更新于2016-10-08（提供下载）　　RDIFramework.NET代码生成器V3.0版本修改了针对3.0版本的框架部分做了大量的调整，同时支持生成Web部分的UI代码（WebForm,MVC），基础的工作交给工具，助力企业快速开发，真…...
2024/4/26 3:40:19

CSS3动画详解（图文教程）

前言

过渡：transition

案例：小米商品详情

2D 转换

1、缩放：`scale`

2、位移：translate

3、旋转：rotate

4、倾斜

3D 转换

1、旋转：rotateX、rotateY、rotateZ

2、移动：translateX、translateY、translateZ

3、透视：perspective

4、3D呈现（transform-style）

动画

1、定义动画的步骤

2、动画属性

steps()的效果

动画举例：摆动的鱼

相关文章

最新文章

CSS3动画详解（图文教程）

前言

过渡：transition

案例：小米商品详情

2D 转换

1、缩放：scale

2、位移：translate

3、旋转：rotate

4、倾斜

3D 转换

1、旋转：rotateX、rotateY、rotateZ

2、移动：translateX、translateY、translateZ

3、透视：perspective

4、3D呈现（transform-style）

动画

1、定义动画的步骤

2、动画属性

steps()的效果

动画举例：摆动的鱼

相关文章

最新文章

1、缩放：`scale`