过渡 & 动画

transition

transition 可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。

使用 transition

.btn {
  transition: all 0.15s linear;
}

.btn:hover {
  transform: scale(1.05);
}

注意：transition 只对数值类的 css 属性生效。例如：display: block 变为 display: node 就不会生效。

transform 不适用于某些内联元素。

为什么 transform 效率高 ？

因为 transform 既不会影响布局，也不会影响到绘制指令，它影响的只是渲染流程的最后一个 draw 阶段。

再说详细些，由于 draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主进程。反之，渲染主进程无论多么忙碌，也不会影响到 transform 的变化。

animation

animation 可以为一个元素定义更复杂的动画效果。

定义 animation

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-60%);
  }

  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

使用 animation

.card {
  animation: slideIn 0.4s;
}

动画相关属性

• animation-name: （必须）动画名称。可选值：none、<keyframes-name>。
• animation-duration: （必须）动画持续时间。可选值：<time>。
• animation-timing-function: （必须）动画速度曲线。可选值：ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)。
• animation-delay: 动画延迟时间。可选值：<time>。
• animation-iteration-count: 动画播放次数。可选值：infinite、<number>。
• animation-direction: 动画播放方向。可选值：normal、reverse、alternate、alternate-reverse。
• animation-fill-mode: 动画填充模式。可选值：none、forwards、backwards、both。
• animation-play-state: 动画播放状态。可选值：running、paused。