CSS动画如何中途停止并维持姿态
2021-11-23 04:07
956 查看
前言
我曾经遇到过一个难题. 我需要让一个摆动的房子从塔吊上落下,但点击落下途中,房子需要维持落下瞬间摆动的角度. 当时把我难坏了,刚开始我希望能获取到房子当前摆动的角度,并且在下落的瞬间赋值给房子的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; }
到此这篇关于CSS动画如何中途停止并维持姿态的文章就介绍到这了,更多相关css动画中途停止内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- 如何停止CSS3的动画?
- 如何用纯 CSS 创作一个均衡器 loader 动画
- 如何停止requestAnimationFrame方法启动的动画
- CURL 用户如何控制中途停止下载
- Css3 3d animation Step1---如何实现css动画
- 如何孩子们可以创建停止运动动画与Windows 7
- 13.(初级)CSS变形transform、过度transition、动画animation注意点及如何让动画更流畅方法
- 如何用纯css打造类materialUI的按钮点击动画并封装成react组件
- 如何用纯 CSS 创作一个变色旋转动画
- 如何css做一个点击导航 页面滚动, 并且有动画效果
- Android中如何使用rotate实现图片不停旋转的效果与动画的停止
- 如何css做一个点击导航 页面滚动, 并且有动画效果
- 如何在监听css动画 并且在动画结束时 执行一段js代码
- 如何判断一个DOM元素正在动画,一个CSS“阻塞”JS的例子
- 如何调试CSS的关键帧(keyframe)动画
- 如何用纯 CSS 创作一个小球上台阶的动画
- UIView动画如何停止
- 如何用 CSS 和 D3 创作火焰动画
- css3 动画停止的时候如何保持最后一个动作不变
- CSS3动画入门 CSS动画如何使用(举例说明)