CSS3学习笔记：动画Animation

1.视觉暂留原理

人类具有**“视觉暂留”**的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。

2.动画原理

通过把人的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没消失前播放下一幅画，就会给人造成一种流畅的视觉变化效果。

3.CSS3动画

使元素从一种样式逐渐变化为另一种样式的效果。

3.1 animation

animation-name属性：设置对象所应用的动画名称

语法：animation-name:keyframename|none;
参数说明：
keyframename：指定要绑定到选择器的关键帧的名称；
none：指定有没有动画。

animation-duration属性：动画的持续时间

语法：animation-duration:time;
time参数指定动画播放完需要的时间，默认值为0

animation-timing-function属性

animation-delay属性：动画延迟

animation-iteration-count属性：动画循环次数

语法：animation-iteration-count:infinite|number;
默认值为1，infinite为无限循环
无限循环时不循环delay，因为delay定义的是动画之外的

animation-direction属性：反向运动

animation-fill-mode属性：动画不播放时的样式

animation-play-state属性：动画是否正在运行或已经暂停

把以上属性写在一行

3.2 @keyframes

keyframes，关键帧，可以指定任何顺序的排列来决定Animation动画的关键位置

@keyframes animationname{
	keyframes-selector{
		css-styles;
	}
}

参数说明：keyframes-selectors：动画持续时间的百分比，0-100%、from(0%)、to(100%)

4.CSS3 will-change

目标：增强页面渲染性能。
CSS的动画、变形、渐变并不会自动触发GPU的加速，而是使用浏览器稍慢的软件渲染引擎。在transition，transform和animation中，应该卸载进程到GPU以加快速度。
只有3D变形会有自己的layer，2D变形不会。

will-change
提前通知浏览器元素将要做什么动画，让浏览器提前准备适合的优化设置。
语法：

will-change:auto|srcoll-position|contents|<custom-ident>|<animation-feature>;