单击时切换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%？

这是我想要实现的一个例子.

Answer 1

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

最好我们可以做类似下面的事情,因为它在逻辑上是有道理的

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

但是,您无法使用纯CSS ^[1]重置或更改为其他动画.这是因为元素每个只允许有一个动画.你可以通过使用或克隆元素在javascript中重置它setTimeout,但我假设你试图避免这种情况.

因此,你有两个选择.第一个是放弃改变大小,只是切换translateX 如下:

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

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

.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 backwards ease-out;并没有重置它