CSS -需要用不同的动画制作两个形状.不能修改HTML

Question

这是我课程的挑战之一，我正在努力创建具有相同类的两个div的两个矩形。我可以创建一个矩形来做其中一个动画，但不知道如何创建另一个矩形。这是使用说明。

使用CSS，用'bar'类样式化这两个div。每个条应该是一个矩形，宽200px，高60px。每个条的背景色为#444444。这些条应该水平堆叠在一起，这样它们就像一个等号(=)。条之间的间距应该是60px。等号应该水平居中。

动画等号，使顶部栏移动到屏幕的左边200px，底部栏移动到屏幕的右边200px。然后，这些条应该移动到屏幕的另一边。动画条形，使它们振荡到屏幕的相反两侧。每次振荡应持续3秒。动画应该循环播放。

.bar {
width: 200px;
height: 60px;
background-color: #444444;
animation-duration: 3s;
animation-name: bar; 
animation-timing-function:linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
}
@keyframes bar {

0% {
-webkit-transform: translateX(200px);
transform: translateX(200px);

}
25% {
-webkit-transform: translateX(000px);
transform: translateX(000px);
}
50% {
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
75% {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
100% {
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
}

<h1>CSS Challenges</h1>
<section>
<h2>Challenge 2</h3>
<div class="bar"></div>
<div class="bar"></div>
</section>

Answer 1

将flex的矩形分布，然后将animation-direction分别应用于具有normal和reverse的不同块:

body { text-align: center; }
section { display: flex; flex-flow: column nowrap; }
.bar {
height: 60px; width: 200px;
background-color: #444444;
margin: 30px auto;
animation: bar 3s linear infinite;
}
.bar:first-child { animation-direction: normal; }
.bar:last-child { animation-direction: reverse; }
@keyframes bar {
0%, 50%, 100% { transform: translateX(0px); }
25% { transform: translateX(-200px); }
75% { transform: translateX(200px); }
}

<h1>CSS Challenges</h1>
<section>
<h2>Challenge 2</h2>
<div class="bar"></div>
<div class="bar"></div>
</section>