CSS 动画一站式指南 _生活百科

CSS 动画一站式指南目录

CSS 动画一站式指南
- 1. CSS 动画
  - 1.1 变换
    - 1.1.1 变换属性介绍
    - 1.1.2 变换动画实践
  - 1.2 过渡
    - 1.2.1 过渡属性介绍
    - 1.2.2 过渡动画实践
  - 1.3 动画
    - 1.3.1 Animation 属性介绍
    - 1.3.2 Animation 动画实践
- 2. CSS 动画综合实践(太空舱)
  - 2.1 太空舱动画介绍
  - 2.2 太空舱动画实现流程
- 3. CSS 动画库
  - 3.1 Animista
  - 3.2 Animate CSS
- 4. CSS 动画性能优化
  - 4.1 使用 visibility:hidden 替换 display:none
  - 4.2 使用 transform 代替 top
  - 4.3 避免使用 Table 布局
  - 4.4 避免规则层级过多
  - 4.5 避免节点属性值放在循环里当成循环变量
  - 4.6 将频繁回流重绘的节点设置为图层
  - 4.7 开启 GPU 硬件加速模式
- 5. 总结

1. CSS 动画在 CSS3 出现之前，简单的交互都需要使用 JS 才能完成，如今 CSS3 增加了transform ，transition ， animation三大交互属性，为 CSS 的单调性增加了很多趣味，CSS 也可以实现比较复杂的动画了。
1.1 变换变换对应的 CSS 属性为transform，变换可分为 2D 变换和 3D 变换，可以由transform-style来指定。transform-style需要声明在父节点中，即需要发生变化的节点的父节点。

flat：2D 变换(所有变换效果在平面上呈现)
preserve-3d：3D 变换(所有变换效果在空间上呈现)

不同的变换对应不同的变换函数，在不同的变换空间使用对应的变换函数即可，接下来简单介绍一下这些变换函数。
1.1.1 变换属性介绍1）translate 位移

translate(x,y)：2D位移
translate3d(x,y,z)：3D位移
translateX(x)：X轴位移，等同于 translate(x,0) 或 translate3d(x,0,0)
translateY(y)：Y轴位移，等同于 translate(0,y) 或 translate3d(0,y,0)
translateZ(z)：Z轴位移，等同于 translate3d(0,0,z)
描述
- 单位： Length 长度，可用任何长度单位，允许负值
- 默认：XYZ轴不声明默认是 0
- 正值：沿X轴向右位移/沿Y轴向上位移/沿Z轴向外位移
- 负值：沿X轴向左位移/沿Y轴向下位移/沿Z轴向内位移

2）scale 缩放

scale(x,y)：2D缩放
scale3d(x,y,z)：3D缩放
scaleX(x)：X轴缩放，等同于 scale(x,1) 或 scale3d(x,1,1)
scaleY(y)：Y轴缩放，等同于 scale(1,y) 或 scale3d(1,y,1)
scaleZ(z)：Z轴缩放，等同于 scale3d(1,1,z)
描述
- 单位： Number 数值或 Percentage 百分比，允许负值
- 默认：XYZ轴不声明默认是 1 或 100%
- 正值： 0<(x,y,z)<1 沿X轴缩小/沿Y轴缩小/沿Z轴变厚，(x,y,z)>1 沿X轴放大/沿Y轴放大/沿Z轴变薄
- 负值： 1<(x,y,z)<0 翻转沿X轴缩小/沿Y轴缩小/沿Z轴变厚，(x,y,z)<-1 翻转沿X轴放大/沿Y轴放大/沿Z轴变薄

3）skew 扭曲

skew(x,y)：2D扭曲
skewX(x)：X轴扭曲，等同于 skew(x,0)
skewY(y)：Y轴扭曲，等同于 skew(0,y)
描述
- 单位： Angle 角度或 Turn 周
- 默认：XY轴不声明默认是 0
- 正值：沿X轴向左扭曲/沿Y轴向下扭曲
- 负值：沿X轴向右扭曲/沿Y轴向上扭曲