使用JavaScript控制CSS3关键帧动画

Controling CSS3 keyframe animation with JavaScript

本文关键字：关键帧 动画 CSS3 控制 JavaScript 使用      更新时间：2023-09-26

我有一个简单的关键帧动画：

animation: blink-truck-lights .4s 8s 10s steps(2) 2 forwards ;
@keyframes blink-truck-lights{
 from{background-position: 0px 0;}
 to{background-position: 0px -250px;}
}

这是JS部分：

   setInterval(function(){
 $('#truck').addClass('blink-truck-lights');       
 },500);
  setInterval(function(){
 $('#truck').removeClass('blink-truck-lights');       
 },800);

现在，我需要它在指定的时间间隔内播放，大约8秒。我想到的是如何实现这一点，也许是用动画语法添加和删除类。但我尝试了setInterval，它添加了类，但当我创建另一个删除类的时间间隔时，动画就无法启动。

您也可以通过纯css来实现。。

#id {
  -webkit-animation: NAME-YOUR-ANIMATION 8s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 8s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 8s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 8s infinite; /* IE 10+ */
}

链接

更新2:---------------------------------------------------------------------

Javascript应答

function blink()
        {       
document.getElementById('blink').className = "animated blink_css";
        }
setInterval(function(){
blink();
},8000)

在CSS中--->

      @keyframes 'blink' {
     //your code for animation
                         }
    //try moz for mozilla,o for opera and webkit for safari and chrome 
        .blink_css {
            -webkit-animation-name: blink;
            -moz-animation-name: blink;
            -o-animation-name: blink;
            animation-name: blink;
                   }
        .animated {
            -webkit-animation-duration:8s;
            -moz-animation-duration:8s;
            -ms-animation-duration:8s;
            -o-animation-duration:8s;
             animation-duration:8s;
                  }

更新3:---------------------------------------------------------------------

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

只要在需要的时候添加和删除这个类。希望这能有所帮助。干杯

这是一种方法，而不是animationEnd或animationStart事件。只需在所需元素上切换类，并设置希望动画重新开始的时间。

setInterval(function(){$('#truck').toggleClass('blink-truck-lights')},10000);

现在，卡车的灯每10秒就会闪烁一次。

相关文章：