动画（animation）：可以定义为使用绘画的手法，创造生命运动的艺术。
兼容性：IE10+、Firefox16+、Chrome43+、Safari9+、Opera30+、Android（-webkit-）
css3 动画：使元素从一种样式逐渐变化为另一种样式的效果
animation-name
语法：animation-name: keyframename | none;
1.keyframename--指定要绑定到选择器的关键帧的名称。
2.none ： 指定没有动画（可用于覆盖从级联的动画）
animation-duration
属性：检索或设置对象动画的持续时间。
语法：animation-duration: time;
参数说明：
time----->指定动画播放完成花费的时间。默认值为0，意味着没有动画效果。
animation-timing-function
动画过渡属性参数
1. linear 线性过渡
2. ease 平滑过渡
3. ease-in 由慢到快
4. ease-out 由快到慢
5. ease-in-out 由慢到快，再慢。
animation-delay属性：
检索或设置对象动画的延迟时间。
语法
animation-delay：time；
参数说明：
可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0.
animation-delay 属性定义动画什么时候开始，单位可以是秒（s）或毫秒（ms），允许负值，-2s使动画马上开始，但会跳过2s进入动画。
【当animation-duration为10s，animation-delay为-2s时，动画跳过两秒的意思是动画跳过前2s，从第3秒开始，整个动画持续时间变成了8秒】
animation-iteration-count属性：
检索或设置对象动画的循环次数。
语法:animation-iteration-count：infinite |
参数说明:
animation-direction属性
检索或设置动画在循环中是否反向运动。
语法：
animation-direction：normal | reverse | alternate | alternate-reverse | initial | inherit；
参数说明：
normal：正常方向；
reverse：反方向运行；
alternate：动画先正常运行再反方向运行，并持续交替运行；
alternate-reverse：动画先反方向运行再正方向运行，并持续交替运行。
animation-direction 属性定义是否循环交替反向播放动画，如果动画被设置为只播放一次，该属性将不起作用
animation-fill-mode属性
规定当动画不播放时（当动画完成或当动画有延迟为开始播放时），要应用到元素的样式。
语法：
animation-fill-mode：none | forwards | backwards | both | initial | inherit；
参数说明：
none：默认值。不设置对象动画之外的状态；
forwards：设置对象状态为动画结束时的状态；
backwards：设置对象状态为动画开始时的状态；
both：设置对象状态为动画结束或开始的状态。
animation-play-state
属性：指定动画是否正在运行或已暂停。
语法：animation-play-state: paused丨running;
参数说明：
paused----->指定暂停动画。
running----->默认值，指定正在运行的动画
动画简写
animation ： name duration timing-function delay iteration-count direction fill-mode play-staye ;
因为name和duration是必需的，所以会先判断这两个。
如果只有一个时间字段，那么就会将其当做动画持续时间【无论其在第几个位置】；如果有两个时间字段，那么就把第一个当做动画持续时间，把第二个当做动画延迟时间。
@keyframes
keyframes定义
关键帧，可以指定任何顺序排列来决定animation动画变化的关键位置。
使用说明：
使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。
在动画过程中可以通过@keyframes规则多次更改CSS样式的设定。
语法：
@keyframes animationnme{
keyframes-selector{
css-styles;
}
}
参数说明：
animationname：必写项，定义animation的名称。
keyframes-selector：必写项，动画持续时间的百分比，0 - 100%、
from（0%）、to（100%）。
css-styles：必写项，一个或多个合法的CSS样式属性。
will-change 增强页面渲染性能
一般的优化方法：
1.使用position:fixed代替background:attchement;
2.带图片的元素放在伪元素中
3.巧用will-change;
目前只有3D变形会触发GPU，而2D则不会。使用translateZ()(or translate3d()）Hack 为元素添加没有变形的3D变形，骗取浏览器触发硬件加速。代价是通过向它自己的层叠加元素，占用RAM和GPU存储空间
--- CSS3动画（will-change）应用 ----
will-change：
属性：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。
语法：will-chang: auto | scroll-position | contents |
兼容性：IE13+、Firefox47+，Chrome49+，Safari9.1+，Opera39+，IOS9.3，Android52
关键词说明：
auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。
scroll-position：表示将要改变元素的滚动位置。
contents：表示将要改变元素的内容。