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

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

不改变动画状态，而是将动画属性移动到新的 class 中，并在动画结束时删除 class：

$(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">

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

How can I play a keyframe animation on click?

javascript

jquery

animation

keyframe

css-animations