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 增加了transformtransitionanimation三大交互属性,为 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轴不声明默认是 1100%
    • 正值: 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 扭曲