JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<!-- CSS3スライダー -->
<div id="container">
    <ul>
        <li><img src="http://dummyimage.com/300x100/000000/fff.gif" alt=""></li>
        <li><img src="http://dummyimage.com/300x100/ff0000/fff.gif" alt=""></li>
        <li><img src="http://dummyimage.com/300x100/00ff00/fff.gif" alt=""></li>
        <li><img src="http://dummyimage.com/300x100/0000ff/fff.gif" alt=""></li>
    </ul>
</div>

CSS

#container {
    width: 300px;
    position: relative;
    overflow: hidden;
    height: 100px;
}
ul {
    position: absolute;
    top: 0;
    left: 0;
    list-style: none;
    width: 1200px;
    margin: 0; padding: 0;
    
    /* animation */
    -webkit-animation: slide 30s infinite;
            animation: slide 30s infinite;
}
li {
    float: left;
    width: 300px;
    overflow: hidden;
}
li img {
    vertical-align: bottom;
}

@-webkit-keyframes slide {
    0% {left: 0;}
    20% {left: 0;}/*hold*/
    
    25% {left: -300px}/* animate */
    45% {left: -300px;}/* hold */
    
    50% {left: -600px;}/*animate*/
    70% {left: -600px}/* hold */
    
    75% {left: -900px;}/* animate */
    95% {left: -900px;}/*hold*/

    100% {left: 0;}/* animate */
}

@keyframes slide {
    0% {left: 0;}
    20% {left: 0;}/*hold*/
    
    25% {left: -300px}/* animate */
    45% {left: -300px;}/* hold */
    
    50% {left: -600px;}/*animate*/
    70% {left: -600px}/* hold */
    
    75% {left: -900px;}/* animate */
    95% {left: -900px;}/*hold*/
    
    100% {left: 0;}/* animate */
}