广告位联系
返回顶部
分享到

CSS动画如何中途停止并维持姿态的介绍

css 来源:转载 作者:秩名 发布时间:2021-09-27 15:20:36 人浏览
摘要

我曾经遇到过一个难题. 我需要让一个摆动的房子从塔吊上落下,但点击落下途中,房子需要维持落下瞬间摆动的角度. 当时把我难坏了,刚开始我希望能获取到房子当前摆动的角度,并且在下落的瞬间赋值给房子的transform:rotate(),但这是实在是太麻烦了,不会是最优解.

我曾经遇到过一个难题. 我需要让一个摆动的房子从塔吊上落下,但点击落下途中,房子需要维持落下瞬间摆动的角度. 当时把我难坏了,刚开始我希望能获取到房子当前摆动的角度,并且在下落的瞬间赋值给房子的transform:rotate(),但这是实在是太麻烦了,不会是最优解.

但其实只要一个属性就能解决这个问题.

animation-play-state

一、仅用CSS

使用该属性使一段动画在其运动周期中暂停.,并且下次开始时直接从当前这一帧开始. 这是一个动画属性,它对animation属性生效, 你既可以在CSS中使用它,也可以在JS中使用它,同样的方便,至少…比获取角度再赋值好到不知道哪里去.

.xxx {
  animation-play-state: paused; 
  //该属性一旦被添加,CSS动画会立即暂停,并且保持于当前帧
}

.xxx {
  animation-play-state: running;
  //该属性一旦被添加,CSS动画会立即从当前帧开始运作;
}

你可以给一个页面元素添加一个animation,然后设置当hover状态时加上

animation-play-state:paused

动画就会在你鼠标追上那个元素时停止.

二、仅用JS

//i等于1时媒体播放并且音符飘动,i等于0时媒体暂停音符暂停.
            if (i == 1) {
                right.style.animationPlayState = "paused"
                audio.pause();
                i = 0;
            } else {
                right.style.animationPlayState = "running";
                audio.play();
                i = 1;
            }

在这里插入图片描述


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.jb51.net/css/791536.html
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计