css动画

css动画用于实现元素从一个css样式配置转换到另一个css样式配置。动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

animation

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间，时长以及其他动画细节。@keyframes规则可以配置动画的实际表现。
CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

animation 的子属性

* animation-name：指定由 @keyframes 描述的关键帧名称。
* animation-duration：设置动画一个周期的时长。
animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
animation-iteration-count：设置动画重复次数，可以指定 infinite 无限次重复动画
animation-play-state：允许暂停和恢复动画。

animation-play-state: paused | running;

animation-timing-function：定义CSS动画在每一动画周期中执行的节奏。

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

animation-fill-mode：指定动画执行前后如何为目标元素应用样式
* @keyframes 规则，当然，一个动画想要运行，还应该包括 @keyframes 规则，在内部设定动画关键帧。

transition

transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式。当某种改变发生时才能通过第二个途径获取样式，产生过渡动画。

css动画优化

动画元素生成独立的 GraphicsLayer，强制开始 GPU 加速
减少好性能样式
使用 will-change 提高页面滚动、动画等渲染性能

潜在的问题

眨眼和闪烁的动画对于有认知问题的人来说是有问题的，比如注意力缺陷多动障碍(ADHD)。此外，某些动画效果可以触发前庭神经紊乱、癫痫、偏头痛和暗点敏感性。

考虑提供一种暂停或禁用动画的机制，以及使用 Reduced Motion Media Query（简约运动媒体查询），为那些表示不喜欢动画的用户创建一个良好的体验。

js动画

使用setInterval

requestAnimationFrame

有时当CPU过载或者有其他原因需要降低重绘频率，绘图完全没有意义。标准动画时序提供了requestAnimationFrame函数，让callback函数在浏览器每次重绘的最近时间运行。 let requstId=requestAnimationFrame(callback) 取消回调的周期执行 cancelAnimationFrame(requestId)

区别

渲染线程分为main thread和compositor thread。如果css动画只改变transform和opacity,css动画在compositor thread完成。而js动画则会在main thread执行，然后在compositor thread进行下一步操作。使用css3硬件加速，改变transform和opacity不会回流和重绘。
js比css功能涵盖面大
实现和重构难度上，css3比js更加简单，性能调优方向固定
对帧率表现不好的低版本浏览器，css3可以做到自然降级
css动画有天然事件支持
css3有兼容性问题

JS动画和CSS动画