简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > 前端问答 > 正文

css animation-play-state属性怎么用

藏色散人
发布： 2019-05-29 09:26:46
原创
2875 人浏览过

css animation-play-state属性规定动画正在运行还是暂停。animation-play-state: paused;表示动画已暂停，animation-play-state: running;表示动画正在播放。

css animation-play-state属性怎么用

css animation-play-state属性怎么用？

作用：animation-play-state 属性规定动画正在运行还是暂停。

语法：

animation-play-state: paused|running;
登录后复制

说明：paused 规定动画已暂停。running 规定动画正在播放。

注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

css animation-play-state属性使用示例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s;
animation-play-state:paused;
/* Safari and Chrome */
-webkit-animation:mymove 5s;
-webkit-animation-play-state:paused;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。</p>
<div></div>
</body>
</html>
登录后复制

效果：

7eb21e6949d7a97db63063c4f528159.png

以上是css animation-play-state属性怎么用的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
css animation-play-state
来源：php.cn
上一篇：css animation-iteration-count属性怎么用 下一篇：css animation-timing-function属性怎么用
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
CSS动画名称的具体含义是指动画的填充模式 最近我尝试使用CSS制作一个动画，其中一个特定的类的不透明度从0%到100%。但是我在class="bar"的动画上遇到了一些问题。我们可以看到animatio...
来自于 2023-09-13 10:16:28
0
1
216
防止CSS动画在移除类时停止的方法 我有一个网格。当我从后端收到更新消息时，我需要在3秒内用橙色突出显示行。当我收到更新时，我将css类'highlight'添加到我的行中并播放我的动画。.highlight{ani...
来自于 2023-08-29 16:15:06
0
1
243
css - animation颜色变化的问题 这是初始颜色值 具体看demo 但是写上动画效果后颜色值就变了，这个是什么原因，怎么可以让动画颜色和初始值颜色一致
来自于 2017-06-28 09:27:36
0
1
985
javascript - 移动端css动画播放状态暂停在ios不起作用 animation-play-state 移动端css动画播放状态暂停在ios不起作用 animation-play-state 我想点击图片图片静止，再点一下图片继续旋转。在安卓手机上可以实现，但是在ios,第一次点击图...
来自于 2017-06-26 10:53:05
0
1
990
javascript - 怎么选择属性结构对应的节点获取对应的id以及父级的id 树形结构返回的信息如下。选中时会对应生成 "state": {"selected" : true}，现在我想获取选中时对应的id以及父级的i...
来自于 2017-05-19 10:29:19
0
1
326
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！