利用CSS延迟动画，打造令人惊艳的复杂动画效果！

动画在前端开发中是经常遇到的场景之一，加入动画后页面可以极大的提升用户体验。

绝大多数简单的动画场景可以直接通过CSS实现，对于一些特殊场景的动画可能会使用到JS计算实现，通过本文的学习，可以让你在一些看似需要使用JS实现的动画场景，使用纯CSS一样可以实现，并且更方便快捷。

先看一个简单的例子：一个方块的位置随着滑条滑动的位置改变

这个场景实现起来很简单，滑条值改变后，使用JS计算方块应该移动的距离，然后将方块定位到指定位置即可。代码如下：

.box {

height: 50px;

width: 50px;

    background-color: aquamarine;

}
<div class="box">div>
<input type="range" min="0" max="1" step="0.01"/>

现在稍微增加一些动画效果：

• 
  
• 方块在中间位置时缩放为原来的一半大小
  
• 方块在中间位置时变成球形
  
• 方块从红色变为绿色
  

对于大小和圆角，同样可以使用简单的JS进行计算实现，但是对于颜色变化，使用JS计算将会是一个非常复杂的过程。

先抛开动画跟随滑条运动这个要求，如果使用CSS实现上面从0-1的动画过程是一个很简单的事：

.box {
height: 50px;
width: 50px;
background-color: aquamarine;
transform: translateX(0);
animation: run 1s linear forwards;

}
@keyframes run {

    0% {
transform: translateX(0) scale(1);
border-radius: 0%;
background: red;

    }

    50% {
transform: translateX(100px) scale(.5);
border-radius: 50%;

    }

    100% {
transform: translateX(200px) scale(1);
border-radius: 0%;
background: green;

    }

}

利用CSS动画帮我们可以很轻松的计算出每个时间点时的状态，现在的问题就变成如何让动画停留在指定的时间点，这就需要使用到动画的两个属性：

annimation-play-state：设置动画是运行还是暂停，有两个属性值runing、paused
annimation-delay：设置动画开始时间的偏移量，如果是正值，则动画会延迟开始；如果是负值(-d)，动画会立即开始，开始位置在动画(d)s时所处的位置。

有了这两个属性，现在将上面的动画停留在50%的位置

假设整个动画过程需要1s，50%的位置则需要将延迟值设置为-0.5s，这样动画就会停留在0.5s的位置。

.box {
height: 50px;
width: 50px;
background-color: aquamarine;
transform: translateX(0);
animation: run 1s -0.5s linear forwards infinite paused;

}

接下来只需要将滑条的值与动画延迟的值关联起来即可，这里可以通过CSS变量来实现：

.box {

--duration: -0.5s;  // 定义延迟变量
height: 50px;
width: 50px;
background-color: aquamarine;
transform: translateX(0);
animation: run 1s var(--duration) linear forwards infinite paused;

}

@keyframes run {

    0% {
transform: translateX(0) scale(1);
border-radius: 0%;
background: red;

    }

    50% {
transform: translateX(100px) scale(.5);
border-radius: 50%;

    }

    100% {
transform: translateX(200px) scale(1);
border-radius: 0%;
background: green;

    }

}

应用场景

利用CSS延迟动画可以轻松实现很多交互场景，例如：跟随鼠标滚动界面发生反馈动画、根据当天时间界面从日出到日落、根据不同分值出现不同表情变化等等。