<style>
@keyframes left {
0% {
background: blue;
transform: rotateX(90deg);
}
50% {
background: white;
transform: translate(200px, 0px) rotateX(0deg);
}
100% {
background: red;
transform: translate(0px, 0px) rotateX(90deg) scale(1.8);
opacity: .1;
}
}
@keyframes right {
0% {
background: red;
transform: rotateX(90deg);
}
50% {
background: white;
transform: translate(-200px, 0px) rotateX(0deg);
}
100% {
background: blue;
transform: translate(0px, 0px) rotateX(90deg) scale(1.8);
opacity: .1;
}
}
body {
background: black;
}
.square {
opacity: .6;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
margin: auto;
background: black;
}
.square:nth-child(1) {
animation: left 6s infinite;
}
.square:nth-child(2) {
animation: left 6s .2s infinite;
}
.square:nth-child(3) {
animation: left 6s .4s infinite;
}
.square:nth-child(4) {
animation: left 6s .6s infinite;
}
.square:nth-child(5) {
animation: left 6s .8s infinite;
}
.square:nth-child(6) {
animation: right 6s infinite;
}
.square:nth-child(7) {
animation: right 6s .2s infinite;
}
.square:nth-child(8) {
animation: right 6s .4s infinite;
}
.square:nth-child(9) {
animation: right 6s .6s infinite;
}
.square:nth-child(10) {
animation: right 6s .8s infinite;
}
</style>