学习CSS动画如何中途停止并维持姿态

3年前 (2023-12-25)CSS5.5k

复制本页网址打印

前言

我曾经遇到过一个难题. 我需要让一个摆动的房子从塔吊上落下,但点击落下途中,房子需要维持落下瞬间摆动的角度. 当时把我难坏了,刚开始我希望能获取到房子当前摆动的角度,并且在下落的瞬间赋值给房子的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动画如何中途停止并维持姿态都看到这里了，搬砖不易，给小编点个赞呗，以后我会更有动力分享哦~

打赏

重要声明
当前栏目内容除非特别标注，否则均来源于网络公开信息整理分享，本站不提供存储和下载服务，且无法保证第三方链接永久可靠。您若对本站或当前页面内容有疑问或者建议，欢迎联系我们，我们将尽快处理，谢谢支持！