章节
问答
课签
笔记
评论
占位
占位

CSS3中设置动画的播放状态

animation-play-state属性主要用来控制元素动画的播放状态

参数:

其主要有两个值:runningpaused

其中running是其默认值,主要作用就是类似于音乐播放器一样,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。

例如,页面加载时,动画不播放。代码如下:

animation-play-state:paused;

 

任务

在CSS编辑器的第49行输入正确代码,让停止的动画在hover的时候播放,不是hover状态停止。

?不会了怎么办

思考一下,我们刚讲过的animation-play-state

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
@keyframes move
    {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / qq_嶸歸_0
你的问题可以这样解决,如果暂停了动画的播放,元素的样式将回到最原始设置状态@keyframes move {  0%{    transform: translateY(90px);    background: orange;  }  15%{    transform: translate(90px,90px);  }  30%{    transform: translate(180px,90px);  }  45%{    transform: translate(90px,90px);  }  ...

已采纳回答 / Csunnnnn
:hover伪类是加在div元素上的(代码- div:hover span, 对div添加hover伪类,控制span的属性),div是整个大框。所以鼠标经过div块就开始动画,移出就停止。

已采纳回答 / 佐珥熱
你有试过吗?div:hover span针对的是div,而你的span:hover针对的是span,第一种情况,就算鼠标不在span上,它还可以移动,而第二种,不能

已采纳回答 / ancine玉
这个属性不是放在 div:hover 里面的,而是放在 div:hover span 里面的就是说选择器选择的是 div:hover span 这个元素div:hover span 表示选择“hover 状态下的 div 元素的后代 span 元素”不理解为什么的话去看看基本的选择器课程吧,空格表示选择后代元素

最赞回答 / 慕斯3035540
div:hover span {  animation-play-state:paused;}动画正常写  running是默认值  不需要特意写   在划出写paused就好

最新回答 / qq_嶸歸_0
你的问题可以这样解决,如果暂停了动画的播放,元素的样式将回到最原始设置状态span{  display: inline-block;  width: 20px;  height: 20px;  background: orange;  transform: translateY(90px);  animation-name: move;  animation-play-state:paused;}div:hover span {  animation-name: move;  animation-dura...

已采纳回答 / 我不是管家
既然用到了runing,那代码肯定有animation-play-state:paused;,你应该是hover的时候才running,当你鼠标移开的时候并不会回到原始状态,而是因为animation-play-state:paused二停留在当前状态。原始状态,应该是0%时的状态

最新回答 / 慕粉1420362554
<!DOCTYPE html><html><head><meta charset="utf-8"><title>变形与动画</title>/*   <link href="style.css" rel="stylesheet" type="text/css">  */ <style>@keyframes move {  0%{    transform: translateY(90px);  }  15%{  ...

已采纳回答 / purple_yao
你的49行代码webkit前少了一个字符“-”,“webkit-animation-play-state:running;”应该写成:“-webkit-animation-play-state:running;”

+ 我来回答 回答最高可+2积分
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言