How to smoothly revert CSS animation to its current state?

Refresh

November 2018

Views

4.9k time

8

I've got not animated element as default. There's also a trigger that lets me turn on & off animation on that element. The animation itself is very simple: moves element from left to the right and back.

When I stop animation, then my element obviously goes back to initial position. But it goes back suddenly, not smoothly. So it just changes its position from the one when I turned off animation to initial one. My question is: is there a way to stop it smoothly, so when I turn off the animation it goes back to initial position but smoothly/animating.

Here's my element and animation: http://jsfiddle.net/2Lwftq6r/

HTML:

<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>

CSS:

div { 
    margin-top: 50px;
    width: 50px; height: 10px;
    background: #000;
    transform: translateX(0);
}

#anim:checked ~ div {
    -webkit-animation: dance 2s infinite ease-in-out;
    -moz-animation: dance 2s infinite ease-in-out;
}

@-webkit-keyframes dance {
  0%, 100% { -webkit-transform: translateX(0); }
  50% { -webkit-transform: translateX(300px); }
}
@-moz-keyframes dance {
  0%, 100% { -moz-transform: translateX(0); }
  50% { -moz-transform: translateX(300px); }
}

3 answers

4

Вы не можете архивировать этот эффект только CSS3путь, но если вам это действительно нужно, вы можете использовать jQuery+ CSS3 Transitions. Мое решение ( http://jsfiddle.net/sergdenisov/3jouzkxr/10/ ):

HTML:

<input type="checkbox" id="anim-input">
<label for="anim-input">Start / stop animation</label>
<div class="anim-div"></div>

CSS:

.anim-div { 
    margin-top: 50px;
    width: 50px;
    height: 10px;
    background: #000;
}

    .anim-div_active {
        -webkit-animation: moving 2s ease-in-out infinite alternate;
        animation: moving 2s ease-in-out infinite alternate;
    }

    .anim-div_return {
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out;
    }

@-webkit-keyframes moving {
    0% { -webkit-transform: translateX(0); }
    100% { -webkit-transform: translateX(300px); }
}

@keyframes moving {
    0% { transform: translateX(0); }
    100% { transform: translateX(300px); }
}

Javascript:

$('#anim-input').on('change', function() {
    var $animDiv = $('.anim-div');
    if (this.checked) {
        $animDiv.removeClass('anim-div_return')
                .addClass('anim-div_active');
        return;
    }

    var transformValue = $animDiv.css('webkitTransform') ||
                         $animDiv.css('transform');
    $animDiv.css({'webkitTransform': transformValue,
                  'transform': transformValue})
            .removeClass('anim-div_active');

    requestAnimationFrame(function() {
        $animDiv.addClass('anim-div_return')
                .css({'webkitTransform': 'translateX(0)',
                      'transform': 'translateX(0)'});
    });
});

PS префиксы поставщиков основаны на фактическом списке браузеров от http://caniuse.com .

4

Я просто была такая же проблема, и я решил ее не использовать анимацию, и это работает прекрасно! Проверьте мое решение: Так что я имел эту лопаточку, что я должен был двигаться, когда завис над только, и я хотел, чтобы перейти обратно гладко, так это то, что я сделал:

#Spatula:hover{
    animation-direction:alternate;
    transform: translate(1.2cm,1cm);
    transition: all 1.5s;
    -webkit-transition: all 1.5s;

}

#Spatula{
    -webkit-transition: all 1.5s;
    transition: all 1.5s;

}

Удачи!

1

Проверьте этот вопрос StackOverflow .

Вы не собираетесь нравится этот ответ, но реальность такова , что CSS3 анимации не очень полезно для достижения этой цели. Для того, чтобы сделать эту работу вам нужно будет повторить много вашего CSS в вашем Javascript , какой вид разрушает точку (как, например , в этом тесно связан ответ Изменение скорости анимации CSS3? ). Для того, чтобы действительно сделать это плавно остановиться вам лучше всего было бы написать анимации на платформе , как в библиотеке анимации Greensock которая предоставляет все необходимые инструменты , чтобы сделать это на самом деле плавно остановить вместо внезапно остановиться.

Там также другой ответ ниже него, что делает усилие при использовании CSS, вы можете посмотреть на что один.