Animation

动态展现CSS样式的变化。

动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
让浏览器控制动画序列，允许浏览器优化性能和效果
动画运行效果良好，甚至在低性能的系统上。
相对一transition，animation可在网页加载时自动执行，且可以实现多帧动画

常用属性

配置动画时间、时长以及其他动画细节

animation-name: keyframename | none;
- keyframename规定需要绑定到选择器的 @keyframes 的名
- none表示无动画效果
animation-duration: <time>;
- 规定完成过渡效果需要花费的时间
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n);
- 规定动画的速度曲线，默认是ease
animation-iteration-count: n|infinite;
- 定义动画的播放次数。
animation-direction: normal | alternate | reverse | alternate-reverse;
- 规定动画是播放的方向，默认是normal
animation-play-state: paused|running;
- 规定动画状态，运行还是暂停。
animation-delay: time;
- 规定动画何时开始，默认是 0。
animation-fill-mode : none | forwards | backwards | both;
- 设置动画结束时的关键帧状态
- animation-fill-mode

关键帧的定义

每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
关键帧使用@keyframes来指定动画发生的时间点
0%表示动画的第一时刻，100%表示动画的最终时刻，可用别名：from和to
也可包含额外可选的关键帧，描述动画开始和结束之间的状态。

          from{opacity:1}
          to{opacity:0}
}```

```@keyframes framName{
          0%{opacity:1}
          100%{opacity:0}
}```

```@keyframes framName {
          0%,50%,100%{opacity:1}
          25%,75%{opacity:0}
}```

---
参考资料
1. http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
2. https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations