CSS 动画中如何让元素从 30% 到 100% 再循环到 30% 时平滑过渡？

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《CSS 动画中如何让元素从 30% 到 100% 再循环到 30% 时平滑过渡？》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

突变效果之 css 动画

在 css 动画中，要实现元素突变效果，需要用到负数的延时属性（animation-delay）。例如，以下代码将创建两个方块，第一个方块从左到右移动，第二个方块从 30% 开始移动到 100%，然后再从 0 开始移动到 30%。

<div class="block"></div>
<div class="block start3"></div>

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

.block {
  animation: 10s linear;
}

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

但是，如果要实现元素从 30% 到 100%，然后从 0 到 30% 的循环运动，则需要分开编写动画：

@keyframes move-part1 {
  0% {
    left: 30%;
  }
  100% {
    left: 100%;
  }
}

@keyframes move-part2 {
  0% {
    left: 0;
  }
  100% {
    left: 30%;
  }
}

.block {
  animation: move-part1 5s, move-part2 5s infinite;
}

这时，为了避免元素回到起始位置时产生突变，可以将元素设置为透明或移动到容器外部后再返回到初始位置。

理论要掌握，实操不能落！以上关于《CSS 动画中如何让元素从 30% 到 100% 再循环到 30% 时平滑过渡？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！