CSS3动画怎么实现每个一段时间播放一次

html-css06

CSS3动画怎么实现每个一段时间播放一次,第1张

可以。前提你得设置2次以上,比如

第一种:animation:4s 10 5s

4s本次运动时间,10是动画10次 5s是等5秒开始动画

第二种:animation-delay:5s 延迟后运行

第三种:需要animation-name: xxoo(xxoo是说本次你做的动画叫什么,纯属自己定义!不要以为这是h5标签XXOO)

@keyfrarmes xxoo

  0%{}

  10%{}

  30%{ 你做的动画已经完成 }

  100%{剩下的跟100%一模一样,就相当于等了几秒}

}

用到动画的元素:hover {

animation-play-state:paused

}

//反正animation-play-state属性已经不支持低级浏览器了。所以不需要考虑hover的兼容效果。

要是想长时间的停止。用JS插入这个属性就好了。

1、用到动画的元素.css('animation-play-state', paused)

打开 animate.css 第一行

.animated {

animation-duration: 1s

animation-fill-mode: both

}

animation-duration 即是动画的时间