CSS动画

1.浏览器渲染原理

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

2.渲染方式

• JS/CSS --> 样式 --> 布局 --> 绘制 --> 合成

• JS/CSS --> 样式 --> 绘制 --> 合成

• JS/CSS --> 样式 --> 合成

查看属性触发流程

3.CSS动画优化

• JS优化 使用 requestAnimationFrame 代替setTimeout 或 setInterval来实现视觉变化
• CSS优化 使用 will-change 或 translate 提升移动的元素

4.transform

作用：旋转、缩放、倾斜或平移给定元素

• translate:平移 translateX() 沿x轴方向平移 translateY() 沿y轴方向平移

  transform: translateX(50px);
  transform: translateY(50px);
  transform: translate(50px,50px);

translate(-50%,-50%)实现绝对定位元素的居中

  <div class="wrapper">
    <div id="demo"></div>
  </div>

.wrapper{
  border:1px solid green;
  position:relative;
  height:300px;
  width:300px;
}  
#demo{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

• scale:缩放 scaleX() 沿x轴方向缩放 scaleY() 沿y轴方向缩放

  transform: scaleX(1.5);
  transform: scaleY(1.5);
  transform: scale(1.5,0.5);

• rotate:旋转

• skew:倾斜

5.transition

• 作用：补充中间帧i
• 语法： transition: 属性名 时长 过渡方式 延迟

transition: height 1s ease 1s ;

这其实是一个简写形式，可以单独定义成各个属性

transition-property: height;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 1s;

指定属性，时长：

transition: height 1s;
transition: left 1s, top 400ms;

过渡方式：

• ease: 逐渐放慢
• linear：匀速
• ease-in：加速
• ease-out：减速
• cubic-bezier函数：自定义速度模式

transition: 1s ease;

延迟：它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果

transition: 1s height, 1s width 1s ;

上面代码指定，width在1秒之后，再开始变化，也就是延迟（delay）1秒

6.animation

animation可以实现复杂的动画，使用animation首先需要定义动画过程，也就是关键帧

@keyframes xxx {
  0% {
    transform: none;
  }
  50%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) translateY(100px);
  }
}

定义了关键帧之后就可以给DOM元素绑定动画

#demo.start{
  animation: xxx 1.5s;
}

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}

这是一个简写形式，可以分解成各个单独的属性

div:hover {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-fill-mode:forwards;
  animation-direction: normal;
  animation-iteration-count: 3;
}

animation-fill-mode:

设置CSS动画在执行之前和之后如何将样式应用于其目标。

• none：默认值，回到动画没开始时的状态
• forwards：让动画停留在结束状态
• backwards：让动画回到第一帧的状态
• both: 根据animation-direction轮流应用forwards和backwards规则

div:hover {
  animation: 1s xxx forwards;
  /* animation-fill-mode: forwards; */
}

animation-direction

指示动画是否反向播放

• normal:每个循环内动画向前循环，默认属性
• reverse:反向运行动画，每周期结束动画由尾到头运行

div:hover {
  animation: 1s xxx 3 reverse;
}

transition、animation Demo