<div class="boxs">
<div class="box one">
</div>
<div class="box two">
</div>
</div>
body {
padding: 20px;
}
.boxs {
width: 300px;
padding: 2em;
display: flex;
flex-direction: column;
gap: 2em;
background-color: #e5e5e5;
}
.box {
width: 30px;
height: 30px;
}
.one {
background-color: red;
animation: slide;
animation-duration: 2s;
animation-delay: 0;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
.two {
background-color: blue;
animation: slide;
animation-duration: 2s;
animation-delay: .5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
@keyframes slide {
0%,100% {
transform: translateX(0%);
}
50% {
transform: translateX(calc(300px - 2em));
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.