animation动画

//简写
//【只有一个时间值，则表示为动画持续时间；有两个时间值时，第一个为动画持续时间，第二个为动画延迟时间。】
animation: move 3s  其他顺序无所谓;

animation-name:move | none

animation-duration: 0默认  .5s 500ms

animation-timing-function:
                            linear 匀速 线性过渡
                            ease  平滑过渡
                            ease-in 加速  由慢到快 
                            ease-out 减速  由快到慢 
                            ease-in-out 加速然后减速 由慢到快再到慢
                            steps(1,start|end) start看不见第一帧,end看不见最后一帧
                            step-start 等同于step-start(1,start)
                            step-end   等同于step-start(1,end)
                            cubic-bezier() 贝塞尔曲线 // http://cubic-bezier.com/#.41,1.77,.6,-0.13

animation-delay:0默认  2s 动画外属性
//动画执行次数
animation-iteration-count :默认1  infinite无限循环
//动画内帧的运动路线 
animation-direction:  
                      normal 正常方向
                      reverse 反方向运行 
                      alternate 动画先正常运行再反方向运行，并持续交替运行 
                      alternate-reverse 动画先反方向运行再正方向运行，并持续交替运行 
                      【后两个值必须配合循环属性才能实现效果】
//动画开始前和结束后的位置
animation-fill-mode: 
                    none 默认值。不设置对象动画之外的状态
                    forwards 设置对象状态为动画结束时的状态
                    backwards 设置对象状态为动画开始时的状态
                    both 设置对象状态为动画结束或开始的状态 或中间

animation-play-state:paused(暂停) running(默认)

定义关键帧

@keyframes move{
    from{
        //等同于0%
    } 
    to{
        //等同100%
    } 
}
兼容
@-webkit-keyframes move{
    //百分比代表duration的时间比   
    0%{
        transform:translateX(0px);
    }
    40%{
        transform:translateX(200px);
    }
    100%{
        transform:translateX(500px);
    }
}

will-change 3D硬件加速

主要针对手机端
--- CSS3动画（will-change）原理 ----
怎么样让动画显示的更流畅：
1、position-fixed 代替 background-attachment
2、带图片的元素放在伪元素中
3、巧用will-change
-------------------------------------------------
目标：增强页面渲染性能。

CPU和GPU
CPU即中央处理器，解释计算机指令以及处理计算机软件中的数据。
GPU即图形处理器，专门处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几何计算而设计的，
有了它，CPU就从图像处理的任务中解放出来，可以执行其他更多的系统任务。

硬件加速：
在计算机中把计算量非常大的工作分配给专门的硬件来处理，减轻CPU的工作量。

现状：
CSS的动画、变形、渐变并不会自动触发GPU加速，而是使用浏览器稍慢的软件渲染引擎。
在transition，transform和anumation的世界里，应该卸载进程到GPU以加快速度。
只有3D变形会有自己的layer，2D变形不会。

translateZ()(or translate3d()) Hack
为元素添加没有变化的3D变形，骗取浏览器触发硬件加速。

代价：
这种情况通过向它自己的层叠加元素，占用PAM和GPU存储空间。

--- CSS3动画（will-change）应用 ----
will-change：
属性：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。
语法：will-chang: auto | scroll-position | contents | <custom-ident> | <animateable-feature>；
兼容性：IE13+、Firefox47+，Chrome49+，Safari9.1+，Opera39+，IOS9.3，Android52
关键词说明：
auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。
scroll-position：表示将要改变元素的滚动位置。
contents：表示将要改变元素的内容。
<custom-ident>：明确指定将要改变的属性与给定的名称。
<animateable-feature>：可动画的一些特征值，比如left、top、margin等。

！！！使用注意（勿滥用、提前声明、remove）
-------------------------------------------------
举个栗子：
div {
-webkit-will-change:transform;
-moz-will-change:transform;
will-change:transform;
}