css - 单击时切换 CSS3 动画

Question

在没有 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我正在努力实现这一目标。

Answer 1

CSS 并不是真的打算做这样的事情，但有一些变通办法

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

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

但是，您不能使用纯 CSS^[1] 重置或更改为不同的动画。这是因为每个元素只允许有一个动画。你可以reset it in javascript通过使用 setTimeout 或克隆元素，但我假设您正试图避免这种情况。

因此，您有两个选择。第一个是放弃大小的变化，只切换 translateX like so :

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

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

.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]:从第二个选项可以看出，可以，只是需要一个移除过去动画的状态。可悲的是像 animation:''; animation:moveIt .25s 向后缓出； 不重置