CSS动画

浏览器渲染过程

1. 根据HTML构建HTML（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合并成一颗渲染树(render tree)
4. Layout布局（文档流，盒模型，计算大小和位置）
5. Paint绘制（把边框颜色，文字颜色，阴影等等画出来）
6. Compose合成（根据层叠关系展示画面）

• ⭐可以通过csstriggers.com查看具体情况。

transform

• 原理：transform:translateX(0 => 300px);
• transform过渡属性可以自动脑补中间帧(transition:all 1s;)
• 常用四个属性
  1. translate：位移， tanslateX,translateY,translateZ为三个互相垂直的三维轴。

  .demo:hover{   
   transform:translate(200px,300px); /*2D*/
   transform:translate3D(100px,200px,300px);/*3D*/
  }
  

  2. scale：缩放

  .demo:hover{
      transform:scale(1.5,0.5);
      /*X放大一点五倍，Y缩小0.5倍*/
      transform:scale(1.5);/*整体放大一点五*/
      /*
      单独放大缩小x/y方向可以使用scaleX/scaleY
      */
  }
  

  3. rotate：旋转

  .demo:hover{
      rotate(45deg);/*默认沿着z轴旋转45°*/
      /*rotateX/rotateY分别设置沿着X/Y轴旋转*/
  }
  

  • 用的时候直接搜MDN比较好
  4. 倾斜skew，同上，直接加度数。
  5. transform多重效果：
  • 组合使用

  .demo{
      transform:scale(0.5) translate(-100%,-100%);
      transform:none;/*取消所有*/
  }
  

• 经验：
  • 一般都需要transition过渡
  • inline元素不支持transform，需要先变成block

CSS动画优化

• JS优化：使用requestAnimationFrame代替setTimeout或setInterval
• css优化：使用will-change或translate

transition过渡

• 作用：补充中间帧
• 语法：
  • transition：属性名 时长 过渡方式 延迟
  • 可以用，分割两个不同的属性：transition:left 2s,top 3s;
  • all 代表所有属性
  • 过渡方式有：ease | ease-in | ease-out | ease-in-out | cubic-bezier | linear
  • ⭐不是所有的属性都可以过渡的：display:none=>block;不能过渡。（visibility:hidden=>wisible）.
  • 如果要添加中间点过渡：
  1. 使用两次transform，在两个状态中间添加一个状态来过度。
  2. 使用animation，声明关键帧，添加动画

  .demo:hover{
      /* Apply to 1 property */
      /* property name | duration */
      transition: margin-right 4s;
      /* property name | duration | delay */
      transition: margin-right 4s 1s;
      /* property name | duration | timing function */
      transition: margin-right 4s ease-in-out;
      /* property name | duration | timing function | delay */
      transition: margin-right 4s ease-in-out 1s;
      /* Apply to 2 properties */
      transition: margin-right 4s, color 1s;
      /* Apply to all changed properties */
      transition: all 0.5s ease-out;
      /* Global values */
      transition: inherit;
      transition: initial;
      transition: unset;
  }
  

animation

• 用法：

1. 先声明关键帧
2. 添加动画

#demo{
   animation:xxx 1.5s;
}
/* xxx 是动画名称*/
@keyframes xxx{
   0% {
       transform:none;
   }
   50% {
       transform:translateX(200px);
   }
   100% {
       transform:translateX(200px) translateY(100px);
   }
}

• 缩写语法：animation:时长|过渡方式|延迟|次数（具体数字或者infinite）|方向（reverse/alternate/alternate-reverse）|填充方式（none/forwards/backwards/both）|是否暂停(paused/running)|动画名;
• 如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。
• @keyframes 不存在层叠样式(cascade)的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据