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

要实现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)

})

html动画效果停顿几秒,css3 animation动画执行结束，停顿几秒后重新开始执行相关推荐

ae制h5文字动画_H5案例分享：CSS3 Animation动画
CSS3 Animation动画一.@keyframes CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的.将@keyframes当作 ...
CSS3 animation动画，风车旋转、loading、人物走路动画案例
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
html动画曲线快速结束,CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
动画效果编程基础详解--Animation Android
动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...
css3 slide动画,css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work)
css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work) 飞机动画块(他从一边到另一边飞行 - 永远). 可以使用jquery折 ...
Android动画效果之自定义ViewGroup添加布局动画
Android动画效果之自定义ViewGroup添加布局动画前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢 ...
css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
HTML设置页面动画效果有几种,前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
Javascript 对 CSS3 animation 动画的流程的简单控制
CSS3的animation是一个好东西,能让页面动画更加纯净流畅,但是之前一扯到动画流程的控制(比如执行完第一个动画后再执行第二个动画在执行某个动作)就有点懵逼如果是jQuery动画呢,有回调函数 ...

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

html动画效果停顿几秒,css3 animation动画执行结束，停顿几秒后重新开始执行相关推荐

最新文章

热门文章