css3动画代码相对简单，在性能上会比javascript动画稍微好一些，浏览器会对css3动画做一些优化（比如专门新建一个图层用来跑动画）。但css3动画对动画控制上不够灵活的缺点也很明显。如何像控制视频播放一样控制css3动画播放、暂停、重放呢？下面实例是我本人的一个尝试。
先点击此处查看效果。
CSS3的动画中，动画元素的animation-play-state属性规定动画是否正在运行或暂停。属性值为paused可指定暂停动画，属性值为running可指定正在运行的动画。默认是 “running”。因此使用JavaScript动态改变这两个值就可以控制CSS3动画播放、暂停了。
控制CSS3动画重放相对麻烦一点，主要的思路将动画元素的动画样式先删除再添加，要注意将动画样式独立成一个类选择器，这样方便直接利用classList对象的方法进行删除添加操作。另外，删除添加是两个操作之间要有时间间隔，用setTimeout就可以实现了。
即使借助JavaScript，对CSS3动画的控制也是有限的。复杂些的效果还得使用JavaScript动画。
立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
280
收藏
