【css3】js条件下多次触发同一个css3动画的解决方案

本文适用于非循环播放动画,而是条件下触发播放动画的解决方案


通常,我们会写一个css3的动画作为一个样式,在需要播放动画的时候把样式加到元素上播放一次


如果需要多次触发播放动画,如果是使用将样式先去掉再马上加上的办法,将无法多次播放动画


这里介绍一下解决方案




	
	
	Animation Test
	



	
		
		
    




这里的例子是一个框里有两个icon,一个显示(icon),一个是动画(animation-icon),


animation-icon,交替使用animation1和animation2来播放动画(注意animation1和animation2的keyframes和class样式都需要分开写(虽然是一抹一样的,但是要骗骗浏览器说这两个是不一样的动画,才能保证每次都触发))


可以看到代码中被注释掉的requestAnimationFrame这一段,思路是先把动画样式去掉,等渲染之后再把动画样式加上去,然而实践表明这个方法不可行(chrome上支持,但是ff上只能播放第一次的动画,所以还是用上面那个两个animation的办法吧)


想看效果的,这里传了压缩包可以下载查看:http://download.csdn.net/download/snow_finland/9984324

(压缩包里就多了两张图片,所以也可以随便找两个图片用上面的代码看效果)

你可能感兴趣的:(css3,animation,css3,动画)