<div class="slide-container"> <div class="slide" id="side-1"> <h1>Slide 1</h1> </div> <div class="slide" id="side-2"> <h1>Slide 2</h1> </div> <div class="slide" id="side-3"> <h1>Slide 3</h1> </div> <div class="slide" id="side-4"> <h1>Slide 4</h1> </div> <div class="slide" id="side-5"> <h1>Slide 5</h1> </div> </div>
body, html { height: 100%; min-height: 100%; margin: 0; overflow: hidden; font: 100%/1.5 sans-serif; } .slide-container { height: 100%; animation: slide 20s ease infinite; } @keyframes slide { 0%, 15% {transform: translateY(0%)} 20%, 35% {transform: translateY(-100%)} 40%, 55% {transform: translateY(-200%)} 60%, 75% {transform: translateY(-300%)} 80%, 95% {transform: translateY(-400%)} } .slide { display: flex; align-items: center; flex-direction: column; background: #6d5fbc; color: #fff; height: 100%; padding: 1em; box-sizing: border-box; overflow: auto; } .slide:nth-child(even) { background: #5fbc91; } .slide h1:first-of-type { margin-top: 0; }