如何平滑地将 CSS 动画恢复到当前状态? [英] How to smoothly revert CSS animation to its current state?

问题描述

我有没有动画元素作为默认.还有一个触发器可以让我打开 &关闭该元素上的动画.动画本身非常简单:将元素从左到右再向后移动.

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.

这是我的元素和动画: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); }
}

推荐答案

我刚刚遇到了同样的问题，我通过不使用动画解决了它，而且效果很好！看看我的解决方案:所以我有这个铲子，当我只在悬停时我必须移动它，我希望它平滑地过渡回来，所以我就是这样做的:

I just had the same problem and I solved it by not using animation and it works perfectly! Check out my solution: So I had this spatula that I had to move when hovered over only, and I wanted it to transition back smoothly, so this is what I did:

#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;

}

祝你好运！

这篇关于如何平滑地将 CSS 动画恢复到当前状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！