知识点：
CSS3动画
CSS3 animation
CSS3 @keyframes
CSS3 will-change
一、CSS3动画
使元素从一种样式逐渐变化为另一种样式的效果。
动画（animation）
anima——灵魂、animate——赋予生命
动画可以定义为使用绘画的手法，创造生命运动的艺术。
视觉暂留原理
人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。
动画原理
通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没有消失前播放下一幅画，就会给人造成一种流畅的视觉变化效果。
【兼容性】
IE10+、FireFox16+、Chrome43+、Safari9+、Opera30+、Android（-webkit-）
二、CSS3 animation
1/animation-name属性
检索或设置对象所应用的动画名称。
【语法】
animation-name: keyframename| none;
【参数说明】
keyframename：指定要绑定到选择器的关键帧的名称；
none：指定有没有动画. （可用于覆盖从级联的动画）。
2/animation-duration属性
检索或设置对象动画的持续时间
【语法】
animation-duration:time;
【参数说明】
time指定动画播放完成花费的时间。默认值为0，意味着没有动画效果
3/animation-timing-function属性
检索或设置对象动画的过渡类型
【语法】
animation-timing-function:
ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|
steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>,
<number>, <number>);
【参数说明】
- linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease：默认。平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- step-start：等同于steps(1, start)
- step-end：等同于steps(1, end)
- steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的
步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认
值为end。 - cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
【备注】：step-start、step-end、steps(<integer>[,[start|end]]?)使用比较少
4/animation-delay属性
检索或设置对象动画的延迟时间。
【语法】
animation-delay:time;
【参数说明】
可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0。
5/animation-iteration-count属性
检索或设置对象动画的循环次数。
【语法】
animation-iteration-count:infinite|<number>;
【参数说明】
<number>为数字，其默认值为"1";infinite为无限次数循环。
6/animation-direction属性
检索或设置对象动画在循环中是否反向运动。
【语法】
animation-direction:normal|reverse|alternate|alternate-reverse|initial|inherit;
【参数说明】
normal：正常方向。默认值；
reverse：反方向运行；
alternate：动画先正常运行再反方向运行，并持续交替运行；
alternate-reverse：动画先反运行再正方向运行，并持续交替运行。
☆【备注】alternate和alternate-reverse必须配合循环animation-iteration-count（）属性，才能实现效果。
7/animation-fill-mode属性
规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式。
【语法】
animation-fill-mode:none|forwards|backwards|both|initial|inherit;
【参数说明】
none：默认值。不设置对象动画之外的状态；
forward：设置对象状态为动画结束时的状态；
backwards:设置对象状态为动画开始时的状态；
both：设置对象状态为动画结束或开始的状态。
8/animation-play-state属性
指定动画是否正在运行或已暂停。
【语法】
animation-play-state:paused|running;
【参数说明】
paused：指定暂停动画；
running：默认值，指定正在运行的动画。
【案例】本来是paused鼠标移入变小手，开始动画，效果如下：
【参考答案】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation-play-state</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
-webkit-animation-name: circle_inner;
animation-name: circle_inner;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
div > .middle { background-image: url(images/circle_middle.png);
-webkit-animation-name: circle_middle;
animation-name: circle_middle;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
div > .outer { background-image: url(images/circle_outer.png);
-webkit-animation-name: circle_outer;
animation-name: circle_outer;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
div > .imooc { background-image: url(images/imooc.png); }
@keyframes circle_inner {
from { transform: rotateX(0deg); }
to { transform: rotateX(360deg); }
}
@keyframes circle_middle {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
@keyframes circle_outer {
from { transform: rotateZ(0deg); }
to { transform: rotateZ(360deg); }
}
div:hover > div {
cursor: pointer;
-webkit-animation-play-state: running;
animation-play-state: running;
}
</style>
</head>
<body>
<div>
<div class="inner"></div>
<div class="middle"></div>
<div class="outer"></div>
<div class="imooc"></div>
</div>
</body>
</html>
●animation属性
复合属性。检索或设置对象所应用的动画特效。
【语法】
animation:name duration timing-function delay iteration-count direction fill-mode play-state;
【备注】☆name/duration是必需的。只要有一个时间，默认第一个优先是duration，其次才是delay。
【综合案例】：
我们平时可以见到有一些滚屏网页都有一个提示滚屏箭头动画效果，比如当我们打开这样一个滚屏页面的时候，网页底部就会有一个向下的箭头来回移动提醒我们下滑屏幕。那么我们也来尝试一下吧。
效果图如下：
【任务】
1、创建一个div，用css控制其大小、字体，输入“>”并翻转90°让其向下，控制位置为网页底部居中。
2、创建向下移动动画关键帧。
3、设置动画为无限循环，每一次延迟.5s。
【参考答案】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-9</title>
<style type="text/css">
div {
font-family: Arial;
font-size: 72px;
font-weight: bold;
position: fixed;
right: 0;
left: 0;
width: 30px;
height: 30px;
margin: auto;
transform: rotate(90deg);
/*此处写animation代码*/
-webkit-animation:down 2s linear .5s infinite alternate;
animation:down 2s linear .5s infinite alternate;
}
@keyframes down{
from{bottom:30px;}
to{bottom:5px;}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
三、CSS3 @keyframes
Keyframes定义
关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置。
使用说明
使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。在动画过程中可以通过@keyframes规则多次更改CSS样式的设定。
【语法】
@keyframes animationname{
keyframes-selector{
css-styles;
}
}
【参数说明】
animationname：必写项，定义animation的名称。
keyframes-selector：必写项，动画持续时间的百分比，0-100%、from（0%）、to（100%）
css-styles：必写项，一个或多个合法的CSS样式属性。
【例如】
@-webkit-keyframes circle_inner {
from { transform: rotateX(0deg); }
25% { transform: rotateX(45deg); }
75% { transform: rotateX(315deg); }
to { transform: rotateX(360deg); }
}
@keyframes circle_inner {
from { transform: rotateX(0deg); }
25% { transform: rotateX(45deg); }
75% { transform: rotateX(315deg); }
to { transform: rotateX(360deg); }
四、CSS3 will-change
目标
增强页面渲染性能
CPU和GPU
CPU即中央处理器，解释计算机指令以及处理计算机软件中的数据。
GPU即图形处理器，专门处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几乎计算而设计的，有了它，CPU就从图形处理的任务中解放出来，可以执行其他更多的系统任务。
硬件加速
在计算机中把计算量非常大的工作分配给专门的硬件来处理，减轻CPU的工作量。
现状
CSS的动画、变形、渐变并不会自动的触发GPU加速，而是使用浏览器稍慢的软件渲染引擎。
在transition，transform和animation的世界里，应该卸载进程到GPU以加快速度。
只有3D变形会有自己的layer，2D变形不会。
translateZ()（or translate3d()）Hack
为元素添加没有变化的3D变形，骗取浏览器触发硬件加速。
代价
这种情况通过向它自己的层叠加元素，占用RAM和GPU存储空间。
●will-change
提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。
【语法】
will-change: auto|scroll-position|contents|<custom-ident>|<animateable-feature>;
【兼容性】
IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+
【关键词说明】
- auto:此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。
- scroll-position：表示将要改变元素的滚动
位置。 - contents：表示将要改变元素的内容。
- <custom-ident>：明确指定将要改变的属性与给定的名称。
【例如】will-change：transform
-webkit-will-change: transform;
-moz-will-change: transform;
will-change: transform;
- <animateable-feature>：可动画的一些特征值，比如left、top、margin等。
【例如】will-change:left/top/margin等等
【注意】（切勿滥用、提前申明、remove）
end.
本笔记整理自慕课网
