单击时切换CSS3动画

Question

在没有javascript的情况下点击CSS3动画的方向来切换方向的最佳方式是什么？

最近我一直在探索checkbox黑客，并试图找出一种方法，只有一套关键帧而不是两套，前进一个，后退一个。这可能吗？或者有一种方法可以用一套？

例如我有以下关键帧：

@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或克隆元素reset it in javascript，但我假设您正试图避免这种情况。

因此，您剩下两个选项。首先是在沟大小的变化，只是切换translateXlike 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 backwards ease-out;不会重置它

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