1.CSS动画
视觉暂留原理：人类具有视觉暂留的特性。人的眼睛在看到一幅画或一个物体后，在0.34秒内不会消失。
动画原理：通过把人物的表情、动画变化等分解后，画成许多动作，利用视觉暂留，在一幅画还没有消失前播放下一副画，就会给人造成一种流畅的视觉变化效果
CSS动画：是元素从一种样式逐渐变化为另一种样式的效果
1.1 CSS动画属性
| 属性 | 说明 | 示例 |
|---|---|---|
| animation-name | 检索或设置对象所应用的动画名称 • keyframename：指定要绑定到选择器的关键帧名称 • none：指定没有动画(可用于覆盖从级联的动画) |
div.green{ |
| animation-duration | 检索或设置对象动画的持续时间 • time 默认值为0，意味着没有动画效果 |
|
| nimation-timing-function | 控制对象动画执行速度 • linear:线性过渡，等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) • ease：平滑过渡，等同于贝塞尔曲线( 0.25, 0.1, 0.25, 1.0) • ease-in：由慢到快，等同于贝塞尔曲线( 0.42, 0.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：等同于step(1, start) • step-end：等同于step(1, end) • step( 第一个参数：必须为正整数，指定函数的步数。 第二个参数：取值可是start或end，指定每一步的值发生变化的时间点。可选，默认end • cubic_bezier(number, number, number, number)自定义贝塞尔曲线，数值需在[0,1]区间内 |
|
| animation-delay | 检索或设置对象动画的延迟时间 人话就是动画开始前等待的时间 • time 以秒或毫秒计，默认0 |
|
| animation-iteration-count | 检索或设置对象动画的循环次数 • infinity:无限循环 • number：指定次数，默认值是1 |
|
| animation-direction | 检索或设置对象动画在循环中是否反向运动 • normal：正常方向 • reverse：反方向运行 • alternate：动画先正常运行再反方向运行，并持续交替运行。搭配循环，才有效果。 • alternate-reverse：动画先反方向再正方向运行，并持续交替运行。搭配循环，才有效果 • |
|
| animation-fill-mode | 规定当动画不播放时(当动画完成或当动画有延迟未开始播放时)，要应用到元素的样式 • none：默认值，不设置对象动画之外的状态 • forwards：设置对象状态为动画结束时的状态 • backwards：设置对象状态为动画开始时的状态 • both：设置对象为动画结束或开始的状态 |
|
| animation-play-state | 指定动画是否正在运行或已暂停 • paused：指定暂停动画 • running：默认值，指定正在运行的动画 |
div{... |
| animation | 复合属性： animation:name during timing-function delay iteration-count direction fill-mode play-state name和during是必须的，会优先判断这两个值 |
div.green{ |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
body{background:#abcdef;}
div{position: relative; 760px;height: 760px;margin:auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-otransform-style: preserve-3d;
transform-style: preserve-3d;
}
.common{position: absolute;top: 0;right: 0;bottom: 0;left: 0; 100%;height: 100%;margin:auto;}
div.red{
background:url(red.png) no-repeat center;transform: rotateY(-45deg);
-webkit-animation-name: circle_red;
animation-name: circle_red;
-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.blue{
background:url(blue.png) no-repeat center;transform: rotateX(-45deg);
-webkit-animation-name: circle_blue;
animation-name: circle_blue;
-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.green{
background:url(green.png) no-repeat center;transform: rotateZ(-45deg);
-webkit-animation: circle_green 10s linear 2s infinite alternate forwards;
animation: circle_green 10s linear 2s infinite alternate forwards;
}
div.wechat{
background:url(wechat.png) no-repeat center;
}
div:hover{
cursor: pointer;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@keyframes circle_red{
from{transform: rotateX(0deg);}
to{transform: rotateX(360deg);}
}
@keyframes circle_green{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}
}
@keyframes circle_blue{
from{transform: rotateZ(0deg);}
to{transform: rotateZ(360deg);}
}
</style>
</head>
<body>
<div>
<div class="wechat"></div>
<div class="red common"></div>
<div class="blue common"></div>
<div class="green common"></div>
</div>
</body>
</html>
2.关键帧
可以指定任何顺序排列来决定animation动画变化的关键位置。
使用说明：使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，可以通过keyframes规则多次更改CSS样式的设定。
@keyframes animationname{
keyframes-selector:{ CSS-style }
}
/*
animationname：动画名称，必需，
keyframes-selector：必需，动画持续时间的百分比，0-100%，from是0，同时100%
CSS-style:必需，一个或多个合法的CSS样式属性
*/
示例
@-webkit-keyframes circle-inner{
0%{ transform: rotateX(0deg); }
25% { transform: rotateX(45deg); }
75% { transform: rotateX(315deg); }
100% { transform: rotateX(360deg) ;}
}
3.will change
CPU：中央处理器，解释计算机指令以及处理计算机软件中的数据
GPU：图形处理器，专门处理和绘制图形相关的硬件，GPU是专为执行复杂的数学和几何计算而设计的。有了它，CPU就从图形处理的任务中解放出来，可以执行其他更多的系统任务。
现状：CSS的动画、变形、渐变并不会自动触发GPU加速，而是使用浏览器的软件渲染引擎(慢)。在transition、transform、animation的世界里，应该将进程委托GPU执行以加快速度。
只有3D变形会有自己的layer，2D变形不会。因此可以使用will change为元素添加没有变化的3D变形，以骗取浏览器触发硬件加速。
使用will change的代价：向他自己的层叠加元素，占用RAM和GPU存储空间。
will-change:参数;
/*
auto:表示没有特定的意图，适用于它通常所做的任何启发式和优化
scroll-position:表示将要改变元素的滚动位置
contents:表示将要改变元素的内容
<custom-ident>:明确指定将要改变的属性与给定的名称
<animatable-feature>:可动画的一些特征值，比如left、top、margin等
*/
示例
.common{
position: absolute;top: 0;right: 0;bottom: 0;left: 0; 100%;height: 100%;margin:auto;
-webkit-will-change:transform;
-moz-will-change:transform;
will-change:transform;
}
注意：不要滥用，需要提前申明，remove