如何在 CSS 动画中实现突变效果？

学习文章要努力，但是不要急！今天的这篇文章《如何在 CSS 动画中实现突变效果？ 》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

CSS 动画：实现突变效果

在 CSS 动画中实现突变效果，即在动画过程中跳过某一段距离，有以下几种方法：

• 负数延时 (animation-delay)：
  通过设置负数的延时属性，可以提前开始动画。例如，要从 30% 开始移动到 100%，可以设置 -3s 的延时，从动画开始即移动到 30%。
• 多个动画：
  为不同的移动阶段创建单独的动画。例如，从 0% 到 30% 的移动可以用一个动画，从 30% 到 100% 的移动可以用另一个动画。
• 运动路径：
  使用运动路径功能 (CSS transform-functions)，绘制复杂的运动路径，实现突变效果。但是，这种方法需要浏览器支持 transform-functions。

示例：

假设有两个箭头，需要从左到右移动，箭头 B 需要先从 30% 移动到 100%，再从 0 开始移动到 30%。

使用负数延时：

<div class="arrow a"></div>
<div class="arrow b"></div>

@keyframes move1 {
  0% {
    left: 0;
  }
  100% {
    left: 100px;
  }
}

.arrow {
  animation: 10s linear move1;
}

.b {
  animation-delay: -3s;
}

使用多个动画：

<div class="arrow a"></div>
<div class="arrow b"></div>

@keyframes move1 {
  0% {
    left: 0;
  }
  30% {
    left: 30px;
  }
}

@keyframes move2 {
  0% {
    left: 30px;
  }
  100% {
    left: 100px;
  }
}

.arrow {
  animation: 10s linear move1;
}

.b {
  animation: 5s linear move2;
  animation-delay: 3s;
}

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~