animation-delay 的扩展使用

基础概念

animation-delay 这个 CSS 属性在平时开发中经常使用，它可以指定从应用动画到元素开始执行动画之前等待的时间量。动画可以稍后开始、立即从开头开始或立即开始并在动画中途播放。通俗来讲就是可以定义动画什么时候开始播放，比如我们希望动画延迟2s再播放，那么可以这样设置：

css
    animation-delay: 2s;

animation-delay 不但支持正数，同时还可以支持负值， MDN 是这样表述的：

负值会导致动画立即开始，但是从动画循环的某个时间点开始。例如，如果你将 -1s 作为动画延迟时间，则动画将立即开始，但是将在动画序列的第 1 秒开始。如果你为动画延迟指定负值，但起始值是隐含的，则起始值取自应用动画到元素的时刻。

例如你使用 CSS 声明了一个元素的动画如下：

css
      @keyframes move {
        0% {
          left: 0;
        }
        100% {
          left: 100px;
        }
      }
      
      .item {
         animation: 10s move -1s linear infinite;
      }

上例中 item 使用名为 move 的 keyframes，它会从 left: 0px 开始线性运动到 left: 100px，总计 10s，速度为 10px/s。这里将animation-delay的值设为 -1s，item 将会从left: 10px立即开始运动。总结起来就一句话，将 animation-delay 设置为负值，可以改变当前元素动画的初始帧。和平时看视频拖动进度条一样，拖到视频的30s处播放，那就相当于是 animation-delay: -30s。

应用场景

那知道了基本用法后，实际项目中有什么应用场景呢？

接上例，假如我们需要做一个动画效果，需要将 5 个 item 同时做 left: 0px 到 left: 100px线性运动，每个元素宽高均为10px的正方形，彼此间隔 10px ，类似队列的效果。item-1 的初始位置是left: 0px, item-2是left: 20px依次类推。那么我们就可以这样使用，非常方便的设置每个元素的初始位置。

css
      @keyframes move {
        0% {
          left: 0;
        }
        100% {
          left: 100px;
        }
      }
      
      .item {
        animation: 10s move linear infinite;
      }

      .item.item-1 {
        animation-delay: 0s;
      }

      .item.item-2 {
        animation-delay: -2s;
      }

      .item.item-3 {
        animation-delay: -4s;
      }

      .item.item-4 {
        animation-delay: -6s;
      }

      .item.item-5 {
        animation-delay: -8s;
      }

目录

基础概念

应用场景