如何暂停动画CSS?

时间:2020-01-05 01:56:10

标签: html css css-animations

我有一个动画,想要在中途暂停约5秒钟。当阴影达到其全长时。我知道动画延迟,但是如何在动画中途插入它或将其放置在哪里?解决方案是停止它并从停下来的地方开始一个全新的动画吗?

sqrt
pown 4 2 // 16

1 个答案:

答案 0 :(得分:0)

使用animationPlayState。

您可以通过以下方式在CSS上进行设置:

$request->input('safety') // return an array with all checked value, e.g: ['ABS','ESP'] 

或者您也可以使用JS进行设置:

#WRITE-HERE-THE-ID {
  animation-play-state: paused;
}

例如,对于您的情况,您可以在动画中将其暂停,然后使用:hover + css或javascript方法恢复。

但是,正如您所说,也许应该是一种简单的解决方案,可以完成动画,设置为无循环并在其他条件下开始另一个循环。

参考:full documentationexample;从另一个问题的第二个答案中得到的:Make a pause during infinite CSS3 animation