JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="list">
<li>1:1</li>
<li>1:2</li>
<li>1:3</li>
<li>2:1</li>
<li>2:2</li>
<li>2:3</li>
<li>3:1</li>
<li>3:2</li>
<li>3:3</li>
</ul>
CSS
@-webkit-keyframes move1 {
0% {top:50px; left:50px;}
100% {top:0px; left:0px;}
}
@-webkit-keyframes move2 {
0% {top:50px; left:50px;}
100% {top:0px; left:50px;}
}
@-webkit-keyframes move3 {
0% {top:50px; left:50px;}
100% {top:0px; left:100px;}
}
@-webkit-keyframes move4 {
0% {top:50px; left:50px;}
100% {top:50px; left:0px;}
}
@-webkit-keyframes move5 {
0% {top:50px; left:50px;}
100% {top:50px; left:50px;}
}
@-webkit-keyframes move6 {
0% {top:50px; left:50px;}
100% {top:50px; left:100px;}
}
@-webkit-keyframes move7 {
0% {top:50px; left:50px;}
100% {top:100px; left:0px;}
}
@-webkit-keyframes move8 {
0% {top:50px; left:50px;}
100% {top:100px; left:50px;}
}
@-webkit-keyframes move9 {
0% {top:50px; left:50px;}
100% {top:100px; left:100px;}
}
ul {
position:relative;
width:150px;
height:150px;
border:1px solid #F00;
}
ul > li {
position:absolute;
left:50px;
top:50px;
width:50px;
height:50px;
background:#FC0;
-webkit-animation:move1 0.5s ease-in-out 0s 1 normal;
-webkit-animation-fill-mode:forwards;
}
ul > li:nth-child(2n){background:#CF0; /* Just for some color */}
ul > li:nth-child(1){
-webkit-animation-name:move1;
-webkit-animation-delay:0.25s;
z-index:9;
}
ul > li:nth-child(2){
-webkit-animation-name:move2;
-webkit-animation-delay:0.50s;
z-index:8;
}
ul > li:nth-child(3){
-webkit-animation-name:move3;
-webkit-animation-delay:0.75s;
z-index:7;
}
ul > li:nth-child(4){
-webkit-animation-name:move4;
-webkit-animation-delay:1.00s;
z-index:6;
}
ul > li:nth-child(5){
-webkit-animation-name:move5;
-webkit-animation-delay:2.25s;
z-index:1;
}
ul > li:nth-child(6){
-webkit-animation-name:move6;
-webkit-animation-delay:1.25s;
z-index:5;
}
ul > li:nth-child(7){
-webkit-animation-name:move7;
-webkit-animation-delay:1.50s;
z-index:4;
}
ul >...