重复使用CSS动画反向（通过重置状态？） [英] Reuse CSS animation in reversed direction (by resetting the state?)

问题描述

我在CSS中使用了两个关键帧动画。

  @keyframes moveLeft 
从左向右移动，另一个使用完全相同的值 - {
 from {transform：translate3d（50px，0，0）;} 
 to {transform：translate3d（0px，0，0）;} 
} 
 
 
 @keyframes moveRight 
 {
 from {transform：translate3d（0px，0，0）;} 
到{transform：translate3d（50px，0，0）;} 
} 
  

但是，我不知道是否可以只使用一个关键帧动画。但是一旦我添加 animation-direction：reverse ，动画只会播放一次。它可能保存以前使用过的信息。
所以：我可以重置这个信息吗？或者有可能在不同的方向使用一个动画两次吗？ （不使用JS）

http://jsfiddle.net/ vrhfd66x /

解决方案

不，没有办法使用CSS重新启动动画。您必须使用JavaScript从元素中删除动画，然后将其重新应用到元素（延迟后）才能重新启动。

以下是 W3C的CSS3动画规范 （在不同的上下文中，但点也应该适用于这种情况）：

请注意，更改animation-name的值不一定会重新启动动画（例如，如果应用了动画列表，并且从列表中删除了一个动画，则只有该动画将停止;其他动画继续）。 要重新启动动画，必须将其移除，然后重新应用。

^重点是我

这 Chris Coiyer的 CSS Tricks文章也表示相同，并提供了一些JS解决方案来重新启动动画。 （注意：该文章引用了Oli的dabblet，声称更改属性（如持续时间，迭代次数使其在Webkit上重新启动，但似乎已过时，因为它们在Chrome上无法使用）。

---

摘要：

已经触及了以下内容，为了完整性，我将重新进行迭代：

• 一旦动画应用于元素，


• UA会跟踪元素上的动画以及是否已完成动画。


• 当在：checked （尽管方向不同）上应用相同的动画时，UA不会执行任何操作，因为动画已经存在于元素上。


• 单击复选框时位置（瞬时）的切换是因为在：checked transform $ c> selector。




从下面的代码片段中可以看出，使用单个动画实现这一点即使使用JavaScript也是相当复杂的。





  var input = document.getElementsByClassName（my-checkbox）[0]; input.addEventListener（'click'，function if（this.checked）{this.classList.remove（'my-checkbox'）; window.setTimeout（function（）{input.classList.add（'anim'）; input.classList.add（'checked'）; };} else {this.classList.remove（'anim'）; window.setTimeout（function（）{input.classList.remove（'checked'）; input.classList.add（'my-checkbox'） ;}，10）;}}）;  

<{class =snippet-code-css lang-css prettyprint-override transform：translate3d（50px，0，0）;}。my-checkbox {animation：moveLeft 1s;动画方向：反向;}。检查{transform：translate3d（0px，0，0）;} anim {animation：moveLeft 1s;} @ keyframes moveLeft {from {transform：translate3d（50px，0，0） }到{transform：translate3d（0px，0，0）; }}

 < script src =https：// cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js\"> ;</script><input type =checkboxclass =my-checkbox>  
 





因此，最佳选项坚持CSS动画）是使用两个不同的动画。





或者，您也可以看看Marcelo的评论。如果实际的使用情况正是在小提琴中提供的，则 transition 就足够了，并且不需要 animation 。转换可以在正向和反向的性质，因此将是一个更安全的赌注。




I've used two keyframe animations in CSS. One moves from left to right and the other one uses exact the same values - but reversed.

@keyframes moveLeft
{
    from {transform: translate3d(50px, 0, 0);}
    to   {transform: translate3d(0px, 0, 0);}
}


@keyframes moveRight
{
    from {transform: translate3d(0px, 0, 0);}
    to   {transform: translate3d(50px, 0, 0);}
}

However, I wonder whether it's possible to use one keyframe animation only. but as soon as I add animation-direction: reverse, the animation does only play once. It probably saves the information that it has been used once before. So: can I reset this information somehow? Or is there any possibility to use one animation twice in different directions? (without using JS)

http://jsfiddle.net/vrhfd66x/

解决方案

No, there is no way to restart the animation using CSS alone. You'd have to use JavaScript to remove the animation from the element and then re-apply it to the element (after a delay) for it to restart.

The below is what the W3C's CSS3 Animation Spec says (in a different context, but the point should hold good for this case also):

Note also that changing the value of ‘animation-name’ does not necessarily restart an animation (e.g., if a list of animations are applied and one is removed from the list, only that animation will stop; The other animations will continue). In order to restart an animation, it must be removed then reapplied.

^{emphasis is mine}

This CSS Tricks Article by Chris Coiyer also indicates the same and provides some JS solutions for restarting an animation. (Note: The article has a reference to Oli's dabblet which claims that altering properties like duration, iteration count makes it restart on Webkit but it seems to be outdated as they no longer work on Chrome).

---

Summary:

While you have already touched upon the following, I am going to re-iterate for completeness sake:

• Once an animation is applied on the element, it remains on the element until it is removed.
• UA does keep track of the animation being on the element and whether it has completed or not.
• When you apply the same animation on :checked (albeit with a different direction), the UA does nothing because the animation already exists on the element.
• The switch of positions (instantaneous) while clicking the checkbox is because of the transform that is applied within the :checked selector. The animation's presence makes no difference.

---

Solutions:

As you can see from the below snippet, achieving this with a single animation is pretty complex even when using JavaScript.

var input = document.getElementsByClassName("my-checkbox")[0];

input.addEventListener('click', function() {
  if (this.checked) {
    this.classList.remove('my-checkbox');
    window.setTimeout(function() {
      input.classList.add('anim');
      input.classList.add('checked');
    }, 10);
  } else {
    this.classList.remove('anim');
    window.setTimeout(function() {
      input.classList.remove('checked');
      input.classList.add('my-checkbox');
    }, 10);
  }
});

input {
  transform: translate3d(50px, 0, 0);
}
.my-checkbox {
  animation: moveLeft 1s;
  animation-direction: reverse;
}
.checked {
  transform: translate3d(0px, 0, 0);
}
.anim{
  animation: moveLeft 1s;
}
@keyframes moveLeft {
  from {
    transform: translate3d(50px, 0, 0);
  }
  to {
    transform: translate3d(0px, 0, 0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="checkbox" class="my-checkbox">

So, the best option (if you want to stick to CSS animations) is to use two different animations.

Alternately, you could also have a look at Marcelo's comment. If the actual use-case is exactly what is provided in the fiddle then transition would suffice and animation isn't required. Transitions can work both in forward and reverse directions by nature and hence would be a safer bet.

这篇关于重复使用CSS动画反向（通过重置状态？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！