动画突变：css实现突发移动效果
在CSS动画中，实现突变效果需要采用特殊的策略。通常，用CSS keyframes实现动画的移动效果是很方便的。但是，当需要实现突变移动时，比如物体从某个位置瞬间跳到另一个位置，就需要使用负的动画延迟。
具体来讲，要让物体从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 }如果需要更复杂的突变动画，则需要单独编写动画，无法使用同一个CSS动画，可以用下面这种路径：
[图片地址：https://segmentfault.com/img/bVc3utS]
立即学习“前端免费学习笔记（深入）”；
相关阅读：
以上就是如何使用 CSS 实现动画突变移动效果？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
622
收藏
