Question

我是学习CSS的新手，并且一直在玩一些动画和东西。

在我的CSS中，我有同样的事情一次又一次地重复，但差异为0.1。这是动画延迟：0.1秒，增量为0.1秒。

我是否必须像我的示例中那样输入代码。或者有没有办法告诉它下一堂课增加0.1？或者我应该以不同的方式做到这一点？

原因是我想要创建大约50个这样的方块以查看它的外观。我真的不想输入50个类，然后将每个类的增量更改为0.2，我必须将其更改50次。我确定有更好的方法吗？

感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
@keyframes mycolour {
    from {height: 100px;}
    to {height: 150px;}
}

.first, .second, .third, .fourth, .fifth, .sixth, .seventh, .eighth, .ninth, .tenth {
    width: 100px;
    height: 100px;
    float: left;
    animation-name: mycolour;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    background-color: red;

}

.second {
    animation-delay: 0.1s;
}

.third {
    animation-delay: 0.2s;
}

.fourth {
    animation-delay: 0.3s;
}

.fifth {
    animation-delay: 0.4s;
}

.sixth {
    animation-delay: 0.5s;
}

.seventh {
    animation-delay: 0.6s;
}

.eighth {
    animation-delay: 0.7s;
}

.ninth {
    animation-delay: 0.8s;
}

.tenth {
    animation-delay: 0.9s;
}



</style>

</head>


<body>

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>
<div class="sixth"></div>
<div class="seventh"></div>
<div class="eighth"></div>
<div class="ninth"></div>
<div class="tenth"></div>

</body>
</html>

Answer 1

像之前建议的那样，javascript是最好的选择：如果你碰巧首先学习jquery，这是用jquery编写的问题的一个简单的解决方案（尽管它主要是简单的ol＆＃j; javascript）。

＆＃13;

// CHANGE THE NUMBER 4 IN THE NEXT LINE TO THE NUMBERS OF DIVS YOU HAVE
for (var i = 1; i <= 4; i++) {
	var div = ".div"+i;
  var value = "."+i+"s";
	$(div).css("animation-delay", value);
}

＆＃13;

@keyframes mycolour {
    from {height: 100px;}
    to {height: 150px;}
}

div {
    width: 100px;
    height: 100px;
    float: left;
    animation-name: mycolour;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    background-color: red;
    animation-delay: .1s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

＆＃13;

停止在css

1 个答案: