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

news2024/12/28 19:43:29

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

绝大多数简单的动画场景可以直接通过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"/>

<script>
const input = document.querySelector("input");
    const box = document.querySelector(".box");
    input.addEventListener('input', (e) => {
const value = e.target.value;
        box.style.transform = `translateX(${200 * value}px)`;
    })
</script>

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

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

在这里插入图片描述

对于大小和圆角，同样可以使用简单的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;
    }
}

<script>
const input = document.querySelector("input");
    const box = document.querySelector(".box");
    // 绑定滑条输入值变化
    input.addEventListener('input', (e) => {
        const value = e.target.value;
        // 设置变量
        box.style.setProperty('--duration', `-${e.target.value}s`)
    })
</script>