css3 animation动画,设置循环间的延时执行
程序开发
2023-09-07 17:50:56
使用wow.js加animate.css之后
我想实现按钮每隔几秒放大一下,提醒用户可以点击那里。
开始以为anamation有自带的每次循环之间的时间延迟。然后发现并没有
animation-delay是首次执行的延时。
然后参考了这个地址:https://segmentfault.com/q/1010000000321090
的回答
改写了animation.css的pulse动画
@-webkit-keyframes pulse2{
0 % { -webkit-transform : scale3d ( 1 , 1 , 1 ) ; transform : scale3d ( 1 , 1 , 1 )}
15 % { -webkit-transform : scale3d ( 1.05 , 1.05 , 1.05 ) ; transform : scale3d ( 1.05 , 1.05 , 1.05 )}
30 % { -webkit-transform : scale3d ( 1 , 1 , 1 ) ; transform : scale3d ( 1 , 1 , 1 )}
100 % { -webkit-transform : scale3d ( 1 , 1 , 1 ) ; transform : scale3d ( 1 , 1 , 1 )}
}
@keyframes pulse2 {
0 % { -webkit-transform : scale3d ( 1 , 1 , 1 ) ; transform : scale3d ( 1 , 1 , 1 )}
15 % { -webkit-transform : scale3d ( 1.05 , 1.05 , 1.05 ) ; transform : scale3d ( 1.05 , 1.05 , 1.05 )}
30 % { -webkit-transform : scale3d ( 1 , 1 , 1 ) ; transform : scale3d ( 1 , 1 , 1 )}
100 % { -webkit-transform : scale3d ( 1 , 1 , 1 ) ; transform : scale3d ( 1 , 1 , 1 )}
}
.animated.pulse2 {
-webkit-animation-name : pulse2; animation-name : pulse2;
animation-duration : 3 s ;
animation-iteration-count : infinite ;
}
标签:
上一篇:
长度最小的子数组代码详解
下一篇:
相关文章
-
无相关信息