单击时切换 CSS3 动画

在没有 JavaScript 的情况下，在点击时改变 CSS3 动画方向的最佳方法是什么？

我最近一直在探索复选框黑客，并试图找到一种方法，只使用一组关键帧，而不是两组，一个前进，一个返回。这可能吗？或者有没有办法用一套来做到这一点？

例如我有以下关键帧：

@keyframes moveIt {
  0%   { 
    transform: translateX(0);
    width: $size;
  }
  50%  {
    width: $size*1.2;
  }
  100% {
    transform: translateX(50px);
    width: $size;
  }
}
@keyframes moveItBack {
  100%   { 
    transform: translateX(0);
    width: $size;
  }
  50%  {
    width: $size*1.2;
  }
  0% {
    transform: translateX(50px);
    width: $size;
  }
}

有什么办法可以将其减少到仅第一组吗？那么回来的时候从100%开始再回到0%呢？

这是一个example http://codepen.io/ftntravis/pen/hpAye我正在努力实现这一目标的内容。

CSS 并不是真的要做这样的事情，但有一些解决方法

最好我们可以做如下的事情，因为它在逻辑上是有意义的

.bubble {
  ...
  animation: moveIt .25s forwards ease-out;
}
input[type=checkbox]:checked ~ .bubble {
  animation: moveIt .25s backwards ease-out;
}

However, you cannot reset or change to a different animation using pure CSS^[1]. This is because elements are only allowed to have one animation each. You can reset it in javascript https://stackoverflow.com/a/6303311/2065702 by using setTimeout or cloning the element, but I assume you're trying to avoid that.

因此，您有两个选择。第一个是放弃尺寸的变化，只切换translateX like so http://codepen.io/anon/pen/vsoqa:

.bubble {
  ...
  transition: all .25s ease-out;
}
input[type=checkbox]:checked ~ .bubble {
  transform: translateX(50px);
}

保留大小变化的另一个选择是做一些更复杂的事情。您基本上可以通过使用伪元素来伪造大小的变化。通过切换彼此相反的动画，您可以使整个元素看起来每次都在脉冲。Demo http://codepen.io/anon/pen/ezxLy

.bubble {
  ...
  transition: all .25s ease-out;
}
.bubble:after, .bubble:before {
  content:''; 
  position:absolute;
  width:100%; height:100%;
  background:inherit;
  border-radius:inherit;
  animation:'';
}
.bubble:before { animation:size .25s ease-out; }
input[type=checkbox]:checked ~ .bubble:before { animation:''; }
input[type=checkbox]:checked ~ .bubble {
  transform: translateX(50px);
}
input[type=checkbox]:checked ~ .bubble:after {
  animation:size .25s ease-out;
}
@keyframes size {
  50% { transform:scale(1.2); }
}

我希望这是有道理的！

^[1]: As seen in the second option, it is possible, it just requires a state of removing the past animation. Sadly something like animation:''; animation:moveIt .25s backwards ease-out; does not reset it