Как я могу воспроизвести анимацию ключевого кадра по клику? - PullRequest
Новая
       35

Как я могу воспроизвести анимацию ключевого кадра по клику?

0 голосов
/ 24 июня 2018

Я хочу создавать анимацию ключевых кадров каждый раз, когда нажимаю на поле. Но когда я нажимаю на поле, анимация срабатывает только один раз. Я хочу, чтобы анимация работала каждый раз, когда я нажимаю на поле.

Любая помощь? Спасибо! 

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

1 Ответ

0 голосов
/ 24 июня 2018

Вместо изменения состояния анимации, переместите свойство animation в новый класс и удалите этот класс в конце анимации: 

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