在没有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。
答案 0 :(得分:5)
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}}之类的东西没有重置它
答案 1 :(得分:0)
这应该做同样的事情,只是持续时间加倍。
@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;
}
}