css3 animation动画,设置循环间的延时执行

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值