我好久没在这里问问题了,如果我做错了什么,请见谅。
我有一个与CSS动画相关的问题。我希望我的动画可以不断重复自身,但不会失去最初的效果。然而,似乎我的代码中存在一个bug,或者是CSS动画行为有问题。
在完成2个旋转动画(spin、spinback)后,循环开始,但新的动画与之前不同。
我的目标是按顺序在6个方框上创建旋转动画,一次一个。当所有方框都翻转时,它们应该按顺序开始回到原始状态。
代码:
/* -------------------------------------------------------- */
#loader {
width: 240px;
height: 100px;
}
.inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
background-color: transparent;
}
.front,
.back {
position: absolute;
width: 80px;
height: 50px;
backface-visibility: hidden;
}
/* -------------------------------------------------------- */
#loader1 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader1 .inner {
animation: spin 10s ease 0s infinite, spinback 10s ease 10s infinite;
-webkit-animation: spin 10s ease 0s infinite, spinback 10s ease 10s infinite;
}
#loader1 .front {
background-color: #db9834;
}
#loader1 .back {
background-color: #3498db;
transform: rotateY(180deg);
}
/* -------------------------------------------------------- */
#loader2 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader2 .inner {
animation: spin 10s ease 1s infinite, spinback 10s ease 11s infinite;
-webkit-animation: spin 10s ease 1s infinite, spinback 10s ease 11s infinite;
}
#loader2 .front {
background-color: #db8834;
}
#loader2 .back {
background-color: #3488db;
transform: rotateY(180deg);
}
/* -------------------------------------------------------- */
#loader3 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader3 .inner {
animation: spin 10s ease 2s infinite, spinback 10s ease 12s infinite;
-webkit-animation: spin 10s ease 2s infinite, spinback 10s ease 12s infinite;
}
#loader3 .front {
background-color: #db7834;
}
#loader3 .back {
background-color: #3478db;
transform: rotateY(180deg);
}
/* -------------------------------------------------------- */
#loader4 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader4 .inner {
animation: spin 10s ease 3s infinite, spinback 10s ease 13s infinite;
-webkit-animation: spin 10s ease 3s infinite, spinback 10s ease 13s infinite;
}
#loader4 .front {
background-color: #db6834;
}
#loader4 .back {
background-color: #3468db;
transform: rotateY(180deg);
}
/* -------------------------------------------------------- */
#loader5 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader5 .inner {
animation: spin 10s ease 4s infinite, spinback 10s ease 14s infinite;
-webkit-animation: spin 10s ease 4s infinite, spinback 10s ease 14s infinite;
}
#loader5 .front {
background-color: #db5834;
}
#loader5 .back {
background-color: #3458db;
transform: rotateY(180deg);
}
/* -------------------------------------------------------- */
#loader6 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader6 .inner {
animation: spin 10s ease 5s infinite, spinback 10s ease 15s infinite;
-webkit-animation: spin 10s ease 5s infinite, spinback 10s ease 15s infinite;
}
#loader6 .front {
background-color: #db4834;
}
#loader6 .back {
background-color: #3448db;
transform: rotateY(180deg);
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(0deg);
}
16% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotateY(0deg);
}
16% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg);
}
}
@-webkit-keyframes spinback {
0% {
-webkit-transform: rotateY(180deg);
}
16% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
@keyframes spinback {
0% {
-webkit-transform: rotateY(180deg);
}
16% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
<div id="loader">
<div id="loader1">
<div class="inner">
<div class="front">
</div>
<div class="back"> </div>
</div>
</div>
<div id="loader2">
<div class="inner">
<div class="front"> </div>
<div class="back"> </div>
</div>
</div>
<div id="loader3">
<div class="inner">
<div class="front"> </div>
<div class="back"> </div>
</div>
</div>
<div id="loader4">
<div class="inner">
<div class="front"> </div>
<div class="back"> </div>
</div>
</div>
<div id="loader5">
<div class="inner">
<div class="front"> </div>
<div class="back"> </div>
</div>
</div>
<div id="loader6">
<div class="inner">
<div class="front"> </div>
<div class="back"> </div>
</div>
</div>
</div>
为了更好地理解,我正在尝试应用CSS翻转卡片方法:
https://www.w3schools.com/howto/howto_css_flip_card.asp
在div上创建一个看起来像在加载的外观...
动画只是给定时间以在正确的时机触发关键帧,然后在关键帧中旋转div并等待其他div完成旋转。因此,公式是在10秒内有6个盒子,这将在(0%到100%)之间,因此(100/6 = 16,6),我认为应该在动画时间的16%结束动画。
spin 10s ease 1s infinite, spinback 10s ease 11s infinite
这意味着我们等待1秒,然后运行spin 10秒(同时等待了11秒),然后我们运行spinback并且同时再次运行spin(这是问题所在)。 - Temani Afif