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]重置或更改为其他动画。这是因为元素每个只允许有一个动画。您可以setTimeout使用translateX或克隆该元素，但我认为您正试图避免这种情况。

因此，你有两种选择。首先是放弃更改大小，只需切换.bubble { ... transition: all .25s ease-out; } input[type=checkbox]:checked ~ .bubble { transform: translateX(50px); } reset it in javascript：

.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); }
}

保持大小变化的另一个选择是做一些更复杂的事情。您可以通过使用伪元素来伪造大小的变化。通过切换彼此相反的动画，您可以使整个元素看起来像每次脉冲。 like so

animation:''; animation:moveIt .25s backwards ease-out;

我希望它有意义！

^[1]：如第二个选项所示，它是可能的，它只需要一个删除过去动画的状态。遗憾的是{{1}}之类的东西没有重置它

Answer 2

这应该做同样的事情，只是持续时间加倍。

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

单击时切换CSS3动画

2 个答案: