JSFiddle - React, Tailwind, and code Playground

by paulL

HTML

<div class="carousel vertical">
    <ul class="items">
        <li class="item" >One</li>
        <li class="item" >Two</li>
        <li class="item" >Three</li>
        <li class="item" >Four</li>
     </ul>
</div>

CSS

/* vertical */
.vertical {
    width: 287px;
    height: 430px;
    position: relative;
    overflow: hidden;
}
.vertical .items {
    -webkit-animation: vscroll 20s infinite;
    -moz-animation: vscroll 20s infinite;
    -ms-animation: vscroll 20s infinite;
    animation: vscroll 20s infinite;
}

.items li.items{
    list-style:none;
    width:287px;
    height:480px;
}
/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
@-moz-keyframes vscroll {
    0%, 18.75%  { margin-top: 0 }
    25%, 43.75% { margin-top: -430px; }
    50%, 68.75% { margin-top: -860px; }
    75%, 93.75% { margin-top: -1290px; }
    100%  { margin-top: 0 }
}
@-webkit-keyframes vscroll {
    0%, 18.75%  { margin-top: 0 }
    25%, 43.75% { margin-top: -430px; }
    50%, 68.75% { margin-top: -860px; }
    75%, 93.75% { margin-top: -1290px; }
    100%  { margin-top: 0 }
}
@-ms-keyframes vscroll {
    0%, 18.75%  { margin-top: 0 }
    25%, 43.75% { margin-top: -430px; }
    50%, 68.75% { margin-top: -860px; }
    75%, 93.75% { margin-top: -1290px; }
    100%  { margin-top: 0 }
}
@keyframes vscroll {
    0%, 18.75%  { margin-top: 0 }
    25%, 43.75% { margin-top: -430px; }
    50%, 68.75% { margin-top: -860px; }
    75%, 93.75% { margin-top: -1290px; }
    100%  { margin-top: 0 }
}