SCSS
body {
display: flex;
position: absolute;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background-color: #ecf0f1;
}
.wrapper {
position: relative;
top: -75px;
left: -75px;
}
.square {
position: absolute;
width: 150px;
height: 150px;
mix-blend-mode: multiply;
opacity: 0.9;
transform: rotate(45deg);
&.square-1 {
background-color: #1abc9c;
animation: move1 5s ease-in-out infinite;
}
&.square-2 {
background-color: #2ecc71;
}
&.square-3 {
background-color: #3498db;
animation: move2 5s ease-in-out infinite;
}
&.square-4 {
background-color: #9b59b6;
animation: move3 5s ease-in-out infinite;
}
&.square-5 {
background-color: #f1c40f;
animation: move4 5s ease-in-out infinite;
}
&.square-6 {
background-color: #e74c3c;
animation: move5 5s ease-in-out infinite;
}
}
@keyframes move1 {
0% {
left: 0px;
}
25% {
left: -50px;
}
50% {
left: 0px;
}
75% {
left: 50px;
}
100% {
left: 0px;
}
}
@keyframes move2 {
0% {
left: 0px;
}
25% {
left: -25px;
}
50% {
left: 0px;
}
75% {
left: 25px;
}
100% {
left: 0;
}
}
@keyframes move3 {
0% {
left: 0px;
}
25% {
left: 25px;
}
50% {
left: 0px;
}
75% {
left: -25px;
}
100% {
left: 0px;
}
}
@keyframes move4 {
0% {
left: 0px;
}
25% {
left: 50px;
}
50% {
left: 0px;
}
75% {
left: -50px;
}
100% {
left: 0px;
}
}
@keyframes move5 {
0% {
left: 0px;
}
25% {
left: 75px;
}
50% {
left: 0;
}
75% {
left: -75px;
}
100% {
left: 0px;
}
}
