突变效果之 css 动画
在 css 动画中，要实现元素突变效果，需要用到负数的延时属性（animation-delay）。例如，以下代码将创建两个方块，第一个方块从左到右移动，第二个方块从 30% 开始移动到 100%，然后再从 0 开始移动到 30%。
登录后复制
@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% 时平滑过渡？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2851803.html
