• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > JS、jQ >  css3 animation动画执行结正文

css3 animation动画执行结束,停顿几秒后重新开始执行

作者:网页模板
类型:文章教程
点击次数:
发布时间:2018-01-22 10:52
分享到:

    要实现css3 animation动画执行结束,停顿几秒后重新开始执行的效果,首先想到的是延时执行:animation-delay,然后设置animation-iteration-count为infinite,即无限执行。但是不行,只有第一次执行的之后,会有延时,后面就是不停顿的执行。设置关键帧,也不好弄,那就借助js吧,思路很简单,将animation写进一个class里面,然后通过js的判断+setTimeout延时,增删这个class样式:

    1、css代码:
.home .scrollTip{position: relative;}
.home .scrollTip.animate{animation: ani 800ms;}
@keyframes ani{
    0% {opacity:1; bottom:0;}
    100% {opacity:0; bottom:-40px;}
}
    2、js代码
//获取dom节点
var scrollTip = document.querySelector('.scrollTip');
//页面载入时,给它执行一次
scrollTip.classList.add('animate');
//监听动画是否结束
scrollTip.addEventListener('animationend',function(){
 //动画结束,移除动画的样式类
 scrollTip.classList.remove('animate');
 //延时1秒,再将动画加入
 setTimeout(function(){
 scrollTip.classList.add('animate');
 },1000)
})

(责任编辑:网页模板)
  • 本文标签:
  • css3 animation
JavaScript继承详解(Klass)
设置了display:none到display:block后,transition动画无效