CSS Animation

8.2

介绍

CSS 通过属性的变化实现动画效果,有 transition 和 animation 两种方式。

  • transition: CSS 属性变化时触发,过渡动画
  • animation: 立即触发,预定义动画

transition

允许平滑地改变属性,在指定时间内从一个值转换到另一个值,从而实现动画效果。

当目标属性发生改变时触发。必须指定属性起始和结束的值。属性的值可以通过 JavaScript 动态设置。

div {
  width: 100px;
  transition: width 2s linear 1s; 
  // property, duration, timeing-function, delay
}

div:hover {
  width: 300px;    
}

animation

需要预先定义属性转换的 keyframes,引用该 keyframes 并设置转换时间、动画效果等。

目前动画的属性值都是固定的。需要切换动画时,可以定义多个样式并动态改变,或者通过动态生成style样式文件添加到当前页面中实现,也可以借助第三方库,如 jQuery.Keyframes

@keyframes my-frame {
  from { background: yellow }
  to { background: green }
}

p {
  animation: my-frame 3s linear 1s infinite reverse both running
}

animation default

name duration timing-function delay iteration-count direction fill-mode play-state
none 0s       ease            0s    1               normal    none      running

animation 属性

animation-${prop}: value
  • name

    对应的 keyframe。

  • duration

    一个周期持续的时间。

  • timing-function

    keyframe 中属性随时间的变化函数,例如 ease,linear 等。

  • delay

    延迟触发的时间。

  • iteration-count

    循环次数。

  • direction

    keyframe 中属性变化方向,可选值有 normal,reverse,alternate,alternate-reverse。

  • fill-mode

    指定动画前后目标的样式,可选值有 none,forwards,backwards,both。

  • play-state

    动画运行状态,可选值有 running,paused

Performance

https://animations-and-performance

过于复杂、引起页面重绘或布局变化的动画,都会影响页面性能。

  • 尽量使用transform, opacity 实现动画(可以被浏览器优化)。

  • 使用will-change提前告诉浏览器会变化的 CSS 属性

    .box {
      will-change: transform, opacity;
    }
    

CSS 动画使用compositor thread,JavaScript 等使用main thread。当涉及重绘和布局时,都会使用main thread

transform

transform 可以旋转、缩放、倾斜、移动元素。非常适合实现动画效果。

📖