突变效果之 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% 时平滑过渡？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
164
