07-CSS3动画

animation-name: keyfamename | none;  //检索或设置对象所应用的动画名称

animation-duration: time;    //检索或设置对象动画的持续时间

annimation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | …;　　//设置动画过渡类型

//       ease：平滑过渡。等同于贝塞尔曲线（0.0,0.0,1.0,1.0）默认值
//     linear：线性过渡。等同于贝塞尔曲线（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( [, [start | end] ]?) 接收两个参数的步进函数
第一个参数：必须为正整数，指定函数的步数
第二个参数：取值可以是start或end，指定每一步的值发生变化的时间点（可选，默认值为end）

//cubic-bezier(,,,)  特定的贝塞尔曲线类型，4个值需在[0,1]之间。

animation-delay: time;    //检索或设置对象动画开始的延迟

animation-iteration-count: infinite | ;    //检索或设置对象动画的循环次数，默认是1，infinite是无限次循环。

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;　　//设置对象动画 在 循环中 是否反方向运动

//           normal：正常方向
//          reverse：反方向运行

//配合循环属性，效果显著
//        alternate：动画先 正方运行，再反方向运行，并持续交替运行
//alternate-reverse：动画先 反方向运行，再正方向运行，并持续交替运行

animation-fill-mode: none | forwards | backwards | both | initial | inherit;  //规定动画不播放时，应用到的样式。（动画完成  或   动画有延迟未开始时）

//     none：默认值，不设置动画之外的状态。
// forwards：设置对象状态为动画结束时的状态。
//backwards：设置对象状态为动画开始的状态。
//     both：设置对象状态为动画结束或开始的状态。

animation-play-state: paused | running;  //指定动画运行或停止，默认值为running。

animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode  play-state;  
//第一个必须写name，其他顺序的其实不重要，不需要的值还可以不写。

@keyframes  animationname{

keyframes-selector   { css-styles; }

keyframes-selector   { css-styles; }

……

}

//animationname  表示要控制的动画的名称。

//keyframes-selector  表示从0%到100%，0%可以用from代替，100%可以用to代替。

//css-styes  表示动画需要调整的样式。

@keyframes circle_inner{
　　from { transform: rotateX(0deg); }
　　25%  { transform: rotateX(45deg); }
　　75%  { transform: rotateX(315deg); }
　　to   { transform: rotateX(360deg); }
}

//提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化方案。

will-change  :  auto | scroll-position | contents | custom-ident> | animateable-feature>;

//                 auto：此关键字没有特定的意图，适用于它通常所做的启发式和优化。
//      scroll-position：表示将要改变元素的滚动位置。
//             contents：表示将要改变元素的内容。

//       custom-ident>：明确指定将要改变的属性与给定的名称。
//animateable-feature>：可动画的一些特征值，如left、top、margin等。