如何解决CSS 动画，一些动画完成，然后依次重复
作为 CSS 动画的新手，我正在尝试制作一些微调器，
不幸的是，我无法重复动画循环，我正在寻求帮助！
代码如下：
.rotate {
transform: rotate(-45deg);
display: flex;
}
#column {
display: flex;
flex-direction: column;
}
.block3 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: 0s;
}
.block4 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: .4s;
}
.block2 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: .8s;
}
.block1 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: 1.2s;
}
@keyframes fade {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
100% {
opacity: 0;
}
}<!DOCTYPE html>
<html lang="it">
<head>
<style>
body {
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.margin {
margin-top: 200px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
</style>
</head>
<body>
<section class="animation rotate">
<div id="column">
<div class="block1"></div>
<div class="block2"></div>
</div>
<div id="column">
<div class="block3"></div>
<div class="block4"></div>
</div>
</section>
</body>
</html>我什至尝试使用无限属性，但显然它继续重复每个块：
.rotate {
transform: rotate(-45deg);
display: flex;
}
#column {
display: flex;
flex-direction: column;
}
.block3 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: 0s;
}
.block4 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: .4s;
}
.block2 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: .8s;
}
.block1 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: 1.2s;
}
@keyframes fade {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
100% {
opacity: 0;
}
}<!DOCTYPE html>
<html lang="it">
<head>
<style>
body {
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.margin {
margin-top: 200px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
</style>
</head>
<body>
<section class="animation rotate">
<div id="column">
<div class="block1"></div>
<div class="block2"></div>
</div>
<div id="column">
<div class="block3"></div>
<div class="block4"></div>
</div>
</section>
</body>
</html>总结： block1执行，block2执行，block3执行，block4执行，然后从block1开始重复
解决方法
您需要为每个块创建一个关键帧：
.rotate {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) rotate(-45deg) ;
display: flex;
flex-wrap: wrap;
width: 100px; /* change this to control the size */
}
.rotate div {
flex:1 1 48%; /* little less than 50% to consider the margin */
margin: 1px;
background-color: black;
animation: 2s linear infinite;
}
/* maintain square ratio*/
.rotate div::before {
content: "";
display: block;
padding-top: 100%;
}
/**/
.rotate div:nth-child(1) { animation-name:fade4}
.rotate div:nth-child(2) { animation-name:fade1}
.rotate div:nth-child(3) { animation-name:fade3}
.rotate div:nth-child(4) { animation-name:fade2}
/* [0% first one 20%][20% second one 40%][40% third one 60%][60% fourth one 80%][80% pause 100%] */
@keyframes fade1 {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
20%,100% {
opacity: 0;
}
}
@keyframes fade2 {
0%,20% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
40%,100% {
opacity: 0;
}
}
@keyframes fade3 {
0%,40% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
60%,100% {
opacity: 0;
}
}
@keyframes fade4 {
0%,60% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
80%,100% {
opacity: 0;
}
}<section class="animation rotate">
<div></div>
<div></div>
<div></div>
<div></div>
</section>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
