restart css3 animation

本文探讨了动画循环问题的解决方案,包括触发reflow时间的方法和使用不同动画名称欺骗浏览器的技术,详细介绍了如何让动画循环播放。

一个动画完了,还想触发,怎么弄?

$el.removeClass('run').addClass('run')

这样做,不行。

因为浏览器发现删除的和新加的是同一个通话,而浏览器不会让同一个动画多次两次。


如何解决?

1、触发reflow时间

$el.removeClass('run');
$el[0].offsetWidth = $el[0].offsetWidth;
$el.addClass('run');

2 两个动画内容一样,但名字不一样。这样欺骗浏览器动画内容不一样

@keyframes run1{
    to{
         opacity: 0;
    }
}
@keyframes run2{
    to{
         opacity: 0;
    }
}


参考:

1 https://css-tricks.com/restart-css-animation/

2 http://tech.noredink.com/post/135195074668/creating-repeatable-css-animations-with-sass?utm_source=html5weekly&utm_medium=email

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值