In this tutorial, you will learn how to create a slideshow and apply a spinning transition using CSS. Watch the video below for a detailed tutorial.
<body> <div class="container"> <div class="cover"></div> <div class="slide"> <img src="https://picsum.photos/id/1011/5472/3648"/> </div> <div class="slide"> <img src="https://picsum.photos/id/1035/5854/3903"/> </div> <div class="slide"> <img src="https://picsum.photos/id/1074/5472/3648"/> </div> <div class="slide"> <img src="https://picsum.photos/id/177/2515/1830"/> </div> </div> </body>
body { height: 100vh; margin: 0; } .container { position: absolute; height: 100%; width: 100%; } .cover { position: absolute; height: 150vmax; width: 150vmax; left: calc(50% - 75vmax); top: calc(50% - 75vmax); pointer-events: none; z-index: 2; animation: rotateCover 10s linear infinite; } @keyframes rotateCover { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } .cover:before, .cover:after { content: ''; position: absolute; height: 100%; width: 100%; left: 50%; background-color: #2e3537; transform: translate3d(-50%, 0, 0); pointer-events: auto; } .cover:before { bottom: 50%; animation: slideTopCover 5s infinite; } @keyframes slideTopCover { 0% { transform: translate3d(-50%, 0, 0); animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); } 40% { transform: translate3d(-50%, -65vmax, 0); } 70% { transform: translate3d(-50%, -65vmax, 0); } 100% { transform: translate3d(-50%, 0, 0); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); } } .cover:after { top: 50%; animation: slideBottomCover 5s infinite; } @keyframes slideBottomCover { 0% { transform: translate3d(-50%, 0, 0); animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1); } 40% { transform: translate3d(-50%, 65vmax, 0); } 70% { transform: translate3d(-50%, 65vmax, 0); } 100% { transform: translate3d(-50%, 0, 0); animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335); } } .slide { background-color: #2e3537; position: absolute; height: 100%; width: 100%; opacity: 0; animation: showHideSlide infinite 20s steps(1); } @keyframes showHideSlide { 0% { opacity: 1; pointer-events: auto; z-index: 1; } 25% { opacity: 0; pointer-events: none; z-index: -1; } 100% { opacity: 0; pointer-events: none; z-index: -1; } } .slide:nth-child(1) { animation-delay: 0s; } .slide:nth-child(2) { animation-delay: 5s; } .slide:nth-child(3) { animation-delay: 10s; } .slide:nth-child(4) { animation-delay: 15s; } .slide img { position: relative; height: 100%; width: 100%; object-fit: cover; opacity: 1; z-index: -1; animation: animate 5s infinite; } @keyframes animate { 0% { transform: rotate(-45deg) scale(1.1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } 33% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 66% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); } 100% { transform: rotate(45deg) scale(0.9); } }