CSS Animation

介绍

CSS 通过属性的变化实现动画效果，有 transition 和 animation 两种方式。

transition: CSS 属性变化时触发，过渡动画
animation: 立即触发，预定义动画

transition

允许平滑地改变属性，在指定时间内从一个值转换到另一个值，从而实现动画效果。

当目标属性发生改变时触发。必须指定属性起始和结束的值。属性的值可以通过 JavaScript 动态设置。

div {
  width: 100px;
  transition: width 2s linear 1s; 
  // property, duration, timeing-function, delay
}

div:hover {
  width: 300px;    
}

animation

需要预先定义属性转换的 keyframes，引用该 keyframes 并设置转换时间、动画效果等。

目前动画的属性值都是固定的。需要切换动画时，可以定义多个样式并动态改变，或者通过动态生成style样式文件添加到当前页面中实现，也可以借助第三方库，如 jQuery.Keyframes。

@keyframes my-frame {
  from { background: yellow }
  to { background: green }
}

p {
  animation: my-frame 3s linear 1s infinite reverse both running
}

animation default

name duration timing-function delay iteration-count direction fill-mode play-state
none 0s       ease            0s    1               normal    none      running

animation 属性

animation-${prop}: value

name

对应的 keyframe。
duration

一个周期持续的时间。
timing-function

keyframe 中属性随时间的变化函数，例如 ease，linear 等。
delay

延迟触发的时间。
iteration-count

循环次数。
direction

keyframe 中属性变化方向，可选值有 normal，reverse，alternate，alternate-reverse。
fill-mode

指定动画前后目标的样式，可选值有 none，forwards，backwards，both。
play-state

动画运行状态，可选值有 running，paused

Performance

https://animations-and-performance

过于复杂、引起页面重绘或布局变化的动画，都会影响页面性能。

尽量使用transform, opacity 实现动画（可以被浏览器优化）。
使用will-change提前告诉浏览器会变化的 CSS 属性
```
.box {
  will-change: transform, opacity;
}
```

CSS 动画使用compositor thread，JavaScript 等使用main thread。当涉及重绘和布局时，都会使用main thread。

transform

transform 可以旋转、缩放、倾斜、移动元素。非常适合实现动画效果。

CL's Blogs