5种暂停动画的方式，你都会？

已于 2024-11-13 16:58:16 修改
阅读量8.7k 收藏 23
点赞数 20
文章标签： css
于 2021-08-20 15:28:18 首次发布
原创文章，禁止任何形式转载！
本文链接：https://blog.csdn.net/shangyanaf/article/details/119824647
版权
本文介绍了5种在前端中暂停动画的方法，包括使用JavaScript的`animationPlayState`属性，CSS的`:hover`选择器暂停，`:checked`状态结合复选框，设置`animation-duration`为0s以及通过`animation: none;`删除动画。通过实例演示了各种方法的效果和适用场景，帮助开发者更好地控制页面动画。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录


学透CSS

前言

最近公司网站上线新的官网，上面飘着一个跑来跑去的小人，刚上线没多久，老板就提着到来砍我，“你要把这个小人累死吗？”，当时我就不乐意了。

老板掏出了刀，我赶紧掏出了MDN，嘿，您猜怎么着，还真让我找到了， animation-play-state,这属性那叫一个管用哦。

当然暂停动画不止这一种方案，其他的方案我们也会在本文讨论。

JavaScript 暂停动画

在 JavaScript 中，该属性是animationPlayState。

使用语法

了解本专栏 订阅专栏 解锁全文
JavaScript中暂停动画的方式
EuForth的博客
10-04 763
动画在网页设计中起着重要的作用，可以增添页面的生动性和交互性。有时候，我们可能需要暂停动画，以便在特定情况下控制动画的运行。在JavaScript中，我们可以使用几种方式来暂停动画。根据实际需求和使用场景，你可以选择适合的方式来实现动画的暂停和恢复。方法，我们在每一帧之间创建一个固定的时间间隔（这里取16毫秒，约为60帧每秒），从而实现动画的连续播放。时，动画函数将不再被调用，从而实现动画的暂停效果。方法获取到需要暂停的动画元素，然后通过修改元素的。方法来清除定时器，从而实现动画的暂停效果。
JavaScript 动画和CSS3动画有什么区别? (前端面试题！必会)
2201_75652841的博客
12-20 291
1.1)运行过程控制较弱,无法附加事件绑定回调函数. CSS 动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告.2.2)动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成。3.2)动画运行时，对动画的控制程度上，js 能够让动画，暂停,取消，终止，css 动画不能添加事件.简单的状态切换，不需要中间过程控制，css 动画是优选方案。
控制css3动画暂停播放、暂停继续播放
路人贾！
08-07 2133
控制css3动画暂停播放、暂停继续播放
CSS实战与技巧——67. 动画播放和暂停（animation-play-state）
最新发布
weixin_63215361的博客
02-23 399
*animation-play-state规定动画播放running还是暂停paused*//*@keyframes用于创建一个动画,动画名称自己设置*//*百分比指的是动画完成时间的百分比*/
jQuery 停止动画
孤云博客
01-17 339
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 from:http://www.w3school.com.cn/jquery/jquery_stop.asp jQuery 停止动画 jQuery 动画 jQuery Callback jQuery stop...
动画暂停
王延朕的博客
05-15 183
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画暂停</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul,ol{ .
jQuery--效果【停止动画】
张默的博客
09-10 191
jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果，在它们完成之前。 stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。 语法: $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向...
实现动画暂停播放
ytmfdw的专栏
04-18 6425
想要实现的功能是：单击动画控件时，能暂停/播放 功能非常简单，但实现起来却没想像中的那么简单，如果不用android的动画，而是自己用线程开始动画，这种方式可以实现，但不推荐 我这里采用的是ObjectAnimator动画，至于这个动画的使用教程，请自行查阅相关资料 ObjectAnimator动画中，有三个方法：         objAnim.start();        
HTML5Canvas雪花动画特效代码
03-07
同时，JavaScript还可能处理用户交互，比如开始、暂停、重置动画等。 为了增加视觉的多样性，开发者可能会在`images`目录下存储不同形状或大小的雪花图片，然后在JavaScript中随机选择这些图片作为雪花的图形源，用...
HTML5 SVG 世界地图旋转动画
11-08
它可以用于教育、数据分析、地理信息系统等领域，提供一种动态展示数据和信息的方式。通过结合CSS3动画、SVG图形和JavaScript交互，开发者可以创造出更多富有创意的可视化效果，提升用户体验。 总结来说，这个主题...
[学习记录] Unity设置游戏暂停时继续播放UI动画的方法
FX_DY的博客
04-30 1160
设置Animator的UpdateMode为UnscaledTime
android属性动画的暂停
08-26
android中属性动画，暂停，播放停止功能的实现
CSS3<2>：animation-play-state，动画暂停
[暂停使用]任先阳
11-04 2421
如何暂停animation动画，用animation-play-state属性就好了 http://www.w3school.com.cn/cssref/pr_animation-play-state.asp    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...
007_停止动画或效果
aihiao的专栏
11-19 187
1. jQuery stop()方法 1.1. jQuery stop()方法用于在动画或效果完成前对它们进行停止。 1.2. stop()方法适用于所有jQuery效果函数, 包括隐藏显示、淡入淡出、滑动和自定义动画。 1.3. 语法 $(selector).stop(stopAll,goToEnd); 1.4. 可选的stopAll参数规定是否应该清除动画队列。默认是false, 即仅停止活动的动画, 允许任何排入队列的动画向后执行。 1.5. 可选的goToEnd参数规定是否立即完成当
动画暂停和播放
weixin_44116816的博客
02-21 351
开发工具与关键技术：DW和css 作者：陈锦通 撰写时间：2019年2月21日星期四 我用css写的动画是可以暂停和播放的要怎么去使用它呢，请看下图的代码 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;s
动画暂停与开始
qq_19820589的博客
02-27 158
动画开始与暂停
5种暂停动画的方式，你都会？(1)，【面试必备
2401_84141260的博客
04-16 854
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
js-控制css3动画暂停播放、暂停继续播放
qq_45458749的博客
10-15 4477
animation-play-state CSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。// animationPlayState 为paused时暂停。// animationPlayState 为空时继续播放。
css动画中间暂停几秒,详解css3中两种暂停方式（transition、animation）
weixin_39562089的博客
08-04 3319
让坐标变化的两种方式：1.传统的top,left坐标修改2.CSS3中的transform属性通过CSS3的animation与transition的结合实现了人物的走路的效果。一般来说运动的状态都是需要可控的，这样才方便我们做进一步的操作。利用animation实现了人物动作的变化，即更换了精灵图的位置，而transition是实现了人物的left变化，即坐标向右移动，人物向前走，背景向后走。t...
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YOLO大师

你的打赏，我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值