JSFiddle - React, Tailwind, and code Playground

Animation

by CBroe

HTML

<ul>
    <li><span>Tokio 14</span></li>
    <li><span>New York</span></li>
    <li><span>Stockholm</span></li>
    <li><span>Berlin</span></li>
</ul>

CSS

li { position:absolute; top:50px; left:0; -webkit-animation: move 6s linear 0s infinite; overflow:hidden; height:3em; }
li span { display:block; position:absolute; top:0; left:0; padding:0 .125em; font-size:2em; font-weight:bold; color:#fff; background:rgba(0,0,0,.5);  z-index:0; overflow:hidden; white-space:pre; }
li:nth-child(1)  { -webkit-animation-name:move1; }
li:nth-child(2)  { -webkit-animation-name:move2; }
li:nth-child(3)  { -webkit-animation-name:move3; }
li:nth-child(4)  { -webkit-animation-name:move4; }

li:nth-child(1) { top:50px; }
li:nth-child(2) { top:100px; }
li:nth-child(3) { top:150px; }
li:nth-child(4) { top:200px; }

@-webkit-keyframes move1 {
     0.000% { width:  0%; z-index:0; }
     6.667% { width:100%; z-index:0; }
    13.333% { width:100%; z-index:0; }
    20.000% { width:100%; z-index:0; }
    26.667% { width:100%; z-index:0; }
    33.333% { width:  0%; z-index:0; }
    40.000% { width:  0%; z-index:0; }
    46.667% { width:  0%; z-index:0; }
    53.333% { width:  0%; z-index:0; }
    60.000% { width:  0%; z-index:0; }
    66.667% { width:  0%; z-index:0; }
    73.333% { width:  0%; z-index:0; }
    80.000% { width:  0%; z-index:0; }
    86.667% { width:  0%; z-index:0; }
    93.333% { width:  0%; z-index:0; }
   100.000% { width:  0%; z-index:0; }
}

@-webkit-keyframes move2 {
     0.000% { width:  0%; z-index:0; }
     6.667% { width:  0%; z-index:0; }
    13.333% { width:  0%; z-index:0; }
    20.000% { width:  0%; z-index:0; }
    26.667% { width:100%; z-index:0; }
    33.333% { width:100%; z-index:0; }
    40.000% { width:100%; z-index:0; }
    46.667% { width:100%; z-index:0; }
    53.333% { width:  0%; z-index:0; }
    60.000% { width:  0%; z-index:0; }
    66.667% { width:  0%; z-index:0; }
    73.333% { width:  0%; z-index:0; }
    80.000% { width:  0%; z-index:0; }
    86.667% { width:  0%; z-index:0; }
    93.333% { width:  0%; z-index:0; }
   100.000% { width:  0%; z-index:0; }
}

@-webkit-keyframes move3 {
     0.000% {...