如何在 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;
}

登录后复制

以上就是如何在 CSS 动画中实现突变效果？的详细内容，更多请关注米云其它相关文章！