我需要无限地激活这个 CSS 动画。我添加了 animation-iteration-count: infinite;
。但它没有用。
我需要做什么才能无限地制作动画?
.pre-loader-area {
position: fixed;
z-index: 10;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
opacity: 1;
}
.pre-loader {
width: 20vw;
height: 20vw;
margin-left: auto;
margin-right: auto;
transform: translateY(40vh);
}
.pre-loader-block-line1,
.pre-loader-block-line2 {
position: relative;
width: 20vw;
height: 9vw;
}
.pre-loader-block-line2 {
position: relative;
top: 2.5vw;
}
.pre-loader-blocks {
position: relative;
float: left;
background-color: rgba(255, 255, 255, 0.8);
width: 41%;
height: 90%;
}
.block2,
.block4 {
float: right;
}
.block1 {
animation: scale-up 1s, scale-down 1s 1s, stay 6s 2s;
animation-iteration-count: infinite;
}
.block2 {
animation: scale-up 1s 1s, scale-down 1s 2s, stay 6s 3s;
animation-iteration-count: infinite;
}
.block4 {
animation: scale-up 1s 2s, scale-down 1s 3s, stay 6s 4s;
animation-iteration-count: infinite;
}
.block3 {
animation: scale-up 1s 3s, scale-down 1s 4s, stay 6s 5s;
animation-iteration-count: infinite;
}
@keyframes scale-up {
0% {
scale: 1;
}
100% {
scale: 1.2;
}
}
@keyframes scale-down {
0% {
scale: 1.2;
}
100% {
scale: 1;
}
}
@keyframes stay {
0% {
scale: 1;
}
100% {
scale: 1;
}
}
<div class="pre-loader-area">
<div class="pre-loader">
<div class="pre-loader-block-line1">
<div class="block1 pre-loader-blocks"></div>
<div class="block2 pre-loader-blocks"></div>
</div>
<div class="pre-loader-block-line2">
<div class="block3 pre-loader-blocks"></div>
<div class="block4 pre-loader-blocks"></div>
</div>
</div>
</div>
最佳答案
我认为您最好的选择是为每个 block 使用单个动画。然后,您可以为每个 block 设置不同延迟的动画(这只会在第一次播放动画时有所不同)
我创建了一个小片段来帮助说明我的意思
.pre-loader-area {
position: fixed;
z-index: 10;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
opacity: 1;
}
.pre-loader {
width: 20vw;
height: 20vw;
margin-left: auto;
margin-right: auto;
transform: translateY(40vh);
}
.pre-loader-block-line1,
.pre-loader-block-line2 {
position: relative;
width: 20vw;
height: 9vw;
}
.pre-loader-block-line2 {
position: relative;
top: 2.5vw;
}
.pre-loader-blocks {
position: relative;
float: left;
background-color: rgba(255, 255, 255, 0.8);
width: 41%;
height: 90%;
}
.block2,
.block4 {
float: right;
}
.block1 {
animation: blockAnimation 4s infinite 0s;
}
.block2 {
animation: blockAnimation 4s infinite 1s;
}
.block3 {
animation: blockAnimation 4s infinite 3s;
}
.block4 {
animation: blockAnimation 4s infinite 2s;
}
@keyframes blockAnimation {
0% {
scale: 1;
}
20% {
scale: 1.2;
}
40% {
scale: 1;
}
100% {
scale: 1;
}
}
<div class="pre-loader-area">
<div class="pre-loader">
<div class="pre-loader-block-line1">
<div class="block1 pre-loader-blocks"></div>
<div class="block2 pre-loader-blocks"></div>
</div>
<div class="pre-loader-block-line2">
<div class="block3 pre-loader-blocks"></div>
<div class="block4 pre-loader-blocks"></div>
</div>
</div>
</div>
关于html - 如何用CSS让多个元素和多个动画无限动起来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73994458/