素材巴巴 > 程序开发 >

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 ; }


标签:

上一篇: 长度最小的子数组代码详解 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。