在 css 动画中运用突变效果
在 css 动画中实现突变效果是一个常见的场景，尤其是当我们需要一个对象在特定时刻突然出现或消失时。
使用关键帧动画
可以使用 @keyframes 规则来创建关键帧动画，从而实现突变效果。通过将动画的关键帧设置为特定的时间点，我们可以控制对象在动画过程中特定时间点的表现。
立即学习“前端免费学习笔记（深入）”；
*从 30% 移动到 100% 再回 0%
要实现箭头从 30% 位置移动到 100%，再从 0 开始移动到 30% 的效果，可以通过以下步骤：
- 使用 @keyframes 创建两个关键帧：
@keyframes move1 {
0% { left: 30%; }
100% { left: 100%; }
}
@keyframes move2 {
0% { left: 0%; }
100% { left: 30%; }
}- 将 animation-delay 设置为负值
为了让第二个动画从 30% 位置开始执行，我们需要对 animation-delay 属性设置负值，例如 -3s。这将在动画序列中提前 3 秒执行第二个关键帧。
animation: 1s linear 0s, 1s linear -3s; /* 第一个关键帧执行 0s，第二个关键帧执行 -3s，即提前 3s 执行 */
使用延迟效果
另一种实现突变效果的方法是使用 animation-delay 属性。通过将 animation-delay 设置为一个非零值，我们可以延迟动画的开始时间，从而实现对象在指定时间后突然出现的效果。
避免动画堆叠
需要避免动画堆叠，即多个动画同时执行并在视觉上产生混乱。要避免这种情况，我们可以使用不同的 css 类来控制不同的动画，或者使用 animation-fill-mode 属性来控制动画的填充模式。
相关阅读
- [animation-delay - css（层叠样式表） | mdn](https://developer.mozilla.org/zh-cn/docs/web/css/animation-delay)
