javascript - 如何在点击时播放关键帧动画？

Question

每次单击框时，我都想创建一个关键帧动画。但是，当我单击该框时，动画只运行一次。我希望每次单击该框时动画都能正常运行。

有什么帮助吗？谢谢!

    $(document).ready(function(){
        $("#rocketstart").click(function(){
            $(".rocket").css("animation-play-state", "running");
        });

    });
     

.rocket {
   background-color: red;
    width: 550px;
    height: 300px;
    cursor: pointer;
    background-repeat: no-repeat;
    margin-right: -340px;
    margin-bottom: -110px;
    animation-name: rocket;
    animation-duration: 1s;
    animation-play-state: paused;
}

@keyframes rocket {
   0%   {  transform:translate(0)    }
   100%  {  transform:translate(0, -50%) }
       70%  {  opacity:1; }
       100%  {  opacity:0; }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='rocket' id="rocketstart" title="rocketup">

Answer 1

不是改变动画的状态，而是将动画属性移动到一个新类中并在动画结束时删除该类:

$(document).ready(function(){
        $("#rocketstart").click(function(){
            $(".rocket").addClass("animated");
        });


        $('.rocket').on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
             $(this).removeClass("animated");
        });
    });

.rocket {
   background-color: red;
    width: 550px;
    height: 300px;
    cursor: pointer;
    background-repeat: no-repeat;
    margin-right: -340px;
    margin-bottom: -110px;

}

.animated{
    animation-name: rocket;
    animation-duration: 1s;
}

@keyframes rocket {
   0%   {  transform:translate(0)    }
   100%  {  transform:translate(0, -50%) }
       70%  {  opacity:1; }
       100%  {  opacity:0; }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='rocket' id="rocketstart" title="rocketup">