js触发css动画,可以重复触发

Posted php0222wangdong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js触发css动画,可以重复触发相关的知识,希望对你有一定的参考价值。

写好动画,但不在需要动画的元素上绑定animation属性,事件触发的时候绑上,事件结束后再删除掉,下次点击就能重新绑上,重现动画效果

CSS代码:

  写好动画效果(闪烁)

myFirst
  0%color:red;      
  25%color:yellow;    
  50%color:red;
  100%color:yellow;             

JS代码:

  

$("触发事件的标签").oncllick = function()

     //给要启用动画的标签绑定设置好的css动画        
     $("要展示效果的标签").style.animation = "myFirst"

    //展示完成后,删除绑定的动画,以便可以下次触发的时候可以再次显示动画效果
    $("要展示效果的标签").style.display;   (或者删除style)

 

以上是关于js触发css动画,可以重复触发的主要内容,如果未能解决你的问题,请参考以下文章

css3动画怎么触发子菜单隐藏和显示

CSS动画,由其他DIV动作触发

用wow.js实现页面滚动时触发animate.css动画特效

CSS3动画如何设置滑动到当屏的时候才触发动画播放

通过滚动触发CSS关键帧动画

如何触发css3过渡动画