css 动画的种类：

1. transition 实现渐变动画

2. transform 转变动画

3. animation 实现自定义动画

transition 过渡

属性值

• 语法：transition: property duration timing-function delay;

• 值

  • transition-property 指定 CSS 属性的 name，transition 效果
  • transition-duration transition 效果需要指定多少秒或毫秒才能完成
  • transition-timing-function 指定 transition 效果的转速曲线
  • transition-delay 定义 transition 效果开始的时候

transform 转换

rotate 旋转

• rotate(angle) 定义 2D 旋转，在参数中规定角度。
• rotate3d(x,y,z,angle) 定义 3D 旋转。
• rotateX(angle) 定义沿着 X 轴的 3D 旋转。
• rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
• rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

skew 倾斜

• skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
• skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
• skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

scale 缩放

• scale(x[,y]?) 定义 2D 缩放转换。
• scale3d(x,y,z) 定义 3D 缩放转换。
• scaleX(x) 通过设置 X 轴的值来定义缩放转换。
• scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
• scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

translate 移动

• translate(x,y) 定义 2D 转换。
• translate3d(x,y,z) 定义 3D 转换。
• translateX(x) 定义转换，只是用 X 轴的值。
• translateY(y) 定义转换，只是用 Y 轴的值。
• translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

matrix 矩阵变形

• matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。

参考：https://www.jianshu.com/p/956d54376338 (opens new window)

animation

animation-fill-mode: forwards; /*该属性让动画停留在最后一帧*/

css 动画问题

transition 和 animation 的区别

1. transition 需要去触发比如：点击事件、鼠标移入事件；而 animation 可以配合 @keyframe 可以不触发事件就触发这个动画

2. transition 触发一次播放一次；而 animation 则是可以设置很多的属性，比如循环次数，动画结束的状态等等；

3. transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；

css 动画和 js 动画的区别

1. 复杂度不同

css 动画相对简单，js 动画相对复杂

2. 兼容性不同

CSS 动画 有兼容性问题，而 JS 大多时候没有兼容性问题

3. 灵活性不同

CSS 在动画控制上不够灵活，JavaScript 动画控制能力很强，可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。

4. 性能不同

css 动画相对于优一些，css 动画通过 GUI 解析，js 动画需要经过 j s 引擎代码解析，然后再进行 GUI 解析渲染。

5. 适用场景不同

对于一些复杂控制的动画，使用 javascript 会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑 CSS 吧