CSS3<2>：animation-play-state，动画暂停

最新推荐文章于 2024-04-25 10:03:03 发布
最新推荐文章于 2024-04-25 10:03:03 发布
阅读量2.3k 收藏 1
点赞数 1
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39571197/article/details/83714007
版权

如何暂停animation动画，用animation-play-state属性就好了

http://www.w3school.com.cn/cssref/pr_animation-play-state.asp 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>animation-play-state</title>
    <style>
        .play {
            animation-play-state: running !important;
        }

        .pause {
            animation-play-state: paused !important;
        }

        #main {
            margin-left: 20%;
            width: 100px;
            height: 100px;
            background-color: red;
            animation: mainAnim 2s ease 2s infinite alternate;
            animation-fill-mode: backwards;
        }

        @keyframes mainAnim {
            from {
                margin-left: 0;
            }

            to {
                margin-left: 50%;
            }
        }
    </style>
</head>

<body>
    <p>
        <button onclick="main.classList.remove('pause')">开始</button>
        <button onclick="main.classList.add('pause')">暂停</button>
    </p>
    <div id="main"></div>
</body>

</html>

 

[暂停使用]日行一善
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在VUE3中使用CSS动画实现无缝轮播鼠标移入暂停
qq_45820271的博客
11-13 2064
首先，使用v-for生成需要轮播的数据,通过计算得到移动的距离与时间。然后在CSS中让它动起来。采用动画播放结束回归原位后刷新class,每个BOX需要移动的距离和时间则通过计算得到。通过animation-play-state: paused让鼠标移入时暂停
如何让CSS动画中途停止并维持姿态
白瑕 的博客
09-24 7492
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
用Animation类来创建动画，打开（开始）和关闭（取消）
最新发布
chuyouyinghe的专栏
04-25 55
以下是如何打开（开始）和关闭（取消）一个简单的动画的例子。对象，它是一个淡入效果的动画。关闭动画时，我们可以调用。上所有正在运行的动画，或者调用动画本身的。在这个例子中，我们首先创建了一个。在Android中，你可以使用。方法来停止特定的动画。
css3 动画的暂停和重新开始
web前端的发展
06-26 3457
CSS3的animation直接提供一个 animation-play-state 属性规定动画正在运行还是暂停 。写动画样式的时候特别注意下不同浏览器的兼容性，加上对应的前缀 ： div{ animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari 和 Chrome */ } 只需要在对应的有anima...
CSS3属性animation-play-state控制动画运行或暂停的技巧
weixin_33898233的博客
02-04 1114
animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停。 div{ animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari 和 Chrome */ } 浏览器支持：Internet Explorer 10、Fire...
【css】animation
richest_qi的博客
09-02 561
animation-name @keyframes指定的关键帧名称 animation-duration 动画从开始到结束持续多长时间 animation-timing-function 调速函数，默认是ease。 它决定了在整段时间里动画是如何推进的。 ease 低速进入，然后突然加速，时间逝去50%，动画已推进至80%，随后减速至动画结束。 ease-in 时间逝去50%，动画已推进至32%，随后加速 ease-out 时间逝去50%，动画已推进至68%，随后减速 ease-in-o.
animation-play:小动画-娱乐
03-29
9. **animation-play-state**: 控制动画是否正在运行或暂停。 ```css div { animation-play-state: paused; } ``` 在“animation-play-master”这个项目中，很可能包含了多个这样的示例，展示了如何结合这些属性来...
css-animation-101：了解如何将动画带入Web项目
02-05
name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode`和`animation-play-state`等子属性，用于控制动画的...
CSS3-animation（动画）_Animation_css_
10-03
8. **animation-play-state**: 控制动画是否正在运行或暂停。 **三、浏览器兼容性** CSS3动画在现代浏览器中得到了广泛支持，但老版本的IE浏览器（低于IE10）不支持。为了确保跨浏览器兼容性，通常会使用 vendor ...
CSS3-animations:玩转动画和关键帧 - http
07-06
CSS3-动画资源： : 笔记： CSS3 动画的基本概念 CSS 动画使我们能够使用一组关键帧在没有 JavaScript 的情况下创建动画。 与 CSS 过渡不同，关键帧动画目前... animation-play-state 确定动画是运行还是暂停。 animati
CSS3中Animation动画属性用法详解
09-24
- `animation-play-state`：控制动画是否正在运行，`running`表示运行，`paused`表示暂停。 需要注意的是，对于早期版本的浏览器，尤其是IE9及以下，以及Safari和Chrome的早期版本，可能需要添加前缀，如`-webkit-`...
怎么使css 动画停止,如何用纯CSS方式实现CSS动画的暂停与播放效果？animation-play-state属性介绍（详解）...
weixin_42527160的博客
08-03 1174
使用纯 CSS 的方法，暂停或播放 CSS 动画。是不是看起来应该是不可能的实现的；或者就算可以实现，也是一个很麻烦的实现方法，需要用大量的css样式才可以实现。其实不然，在 CSS3 animation 中，就有这样一个属性可以做到暂停、播放动画。本章就给大家介绍如何用纯CSS方式实现CSS动画的暂停与播放效果？animation-play-state属性介绍(详解)。有一定的参考价值，有需要的...
CSS动画的暂停和继续：@click改变动画的animation-play-state
pei_y_y的博客
11-23 1033
同事教我的，但他说是个笨方法，但我查了很久也没找到答案Orz... 我想要做一个唱片机，音乐播放时候唱片机旋转，音乐暂停唱片机也暂停，继续播放音乐，动画也从暂停的位置继续旋转. //这是一个图片，她的style名字是animationState，要在data(){}里声明animationState哦 <image class="img" :style="animationState" src="../../static/css/image/audioBG3.png" mode="aspectF
safari animation-play-state:pause失效的大坑
wangshuo0407的博客
04-02 2327
为了更好的控制动画，想要使用animation-play-state：pause开始时暂停动画播放，需要的时候移除animation-play-state：pause改为animation-play-state：running，就可以运行动画了。其他浏览器里没有任何问题，然而在safari、微信webview里却不能使用了，简直就是缺陷！测试如下：使用animated.css中的zoomInDow...
css3常用属性animation-play-state的使用技巧
dandandegeshou的博客
02-04 2449
浏览器支持： Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。 Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性。 注释：Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。 语法：animat
【HTML5】网页实用技巧2：设置动画自动循环播放，鼠标移上去，停止动画播放
王迪
12-10 4422
需要实现的效果：圆形图片，一直执行旋转的动画，鼠标移上去时，动画停止 实现思路： ①制作一个圆形图片，制作步骤参照：圆形图片的制作 ②创建动画，关键内容：@keyframes 的使用 ③给图片使用动画，关键属性：animation 属性的使用 ④给图片添加 hover 伪类选择器，鼠标移上去时，动画停止，关键属性animation-play-state:paused; 实现代码： <!DOCTYPE html> <html> <head> ..
html 动画循环播放,CSS3 animation（动画） 属性
weixin_39763902的博客
06-07 5685
一、animation1.CSS3animation(动画)属性语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;实例：div{animation:mymove 5s infinite;-webkit-animation:mymove 5s infini...
怎么暂停CSS3动画
qq_31483493的博客
02-20 4247
在实现音乐播放页面时需要让一个圆进行旋转，当音乐暂停时希望圆也停止转动停留在当前时刻，当音乐播放时动画会继续进行，这里需要用到CSS3的一个新属性animation-play-state,它有两个值： { animation-play-state:paused;//暂停动画 animation-play-state:running;继续播放动画 } 注意：在添加上面这个属性的...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>消防小卫士</title> <link rel="stylesheet" href="css/styles.css"> <script src="js/styles.js"> window.onload = function() { // 在这里编写弹窗或跳转页面的代码 }; </script> <style type="text/css"> body { margin: auto; width: 750px; height: 1334px; display: flex; } #caseVerte { height: 140px; width: 150px; position: relative; right: 585px; top: 623px; } /*#caseVerte #load { color: #d82900; font-size: 30px; font-weight: bold; text-align: center; }*/ #caseVerte #case { height: 33px; width: 32px; border-radius: 10%; background-color: #68c28e; animation: case 3s; } @keyframes case { 0% { width: 0%; } 50% { width: 463px; } 100% { width: 0%; animation-play-state: paused; } } </style> </head> <body> <div class="bj"> <img src="img/1.png" /> </div> <div id="caseVerte"> <div id="case"></div> <!-- <div id="load"> --> <!-- <p>loading ...</p> --> <!-- </div> --> </div> </body> </html> 根据以上在动画完成后跳转到百度网站
07-15
根据您提供的代码，您可以在动画完成后使用JavaScript代码跳转到百度网站。请将下面的代码添加到 `<script>` 标签内： ```javascript window.onload = function() { var caseElement = document.getElementById("case"); caseElement.addEventListener("animationend", function() { window.location.href = "https://www.baidu.com"; }); }; ``` 在上述代码中，我们使用 `addEventListener` 监听动画结束事件 `animationend`。当动画结束后，会执行回调函数，其中 `window.location.href` 将会跳转到百度网站。 请确保在页面加载完毕后，样式和JavaScript文件都已成功加载，以确保代码能够正常执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值