三国自走棋羁绊系统

## 基础概念

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


```css
    animation-delay: 2s;
```


animation-delay 不但支持正数，同时还可以支持负值， [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-delay) 是这样表述的：
> 负值会导致动画立即开始，但是从动画循环的某个时间点开始。例如，如果你将 -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;
      }
```

animation-delay 的扩展使用

前端开发的经验学习、总结、记录