animation-play-state
属性用于控制动画的播放状态,可以使动画暂停或继续播放。
语法
animation-play-state: running | paused;
running
:默认值,动画正在播放。paused
:动画暂停播放。
使用示例
-- -------------------- ---- ------- ---------- ------- - ---- - ---------- ------------------ - -- - ---------- -------------- - - --------- - --------------- -------- ------------------- --- --------------------- -------- -- ------ -- - --------------- - --------------------- ------- -- --------- -- -展开代码
在上面的示例中,当鼠标悬停在 .slide-in
元素上时,动画会暂停播放,鼠标移开后动画会继续播放。
注意事项
animation-play-state
属性可以通过 JavaScript 动态控制,例如在特定事件触发时暂停或继续动画播放。- 当动画处于暂停状态时,可以通过
animation-play-state
属性将其恢复至播放状态。