Ken burns Effect with css ( Source Code )

Ken burns Effect with css ( Source Code )

HTML

<h1> <span>Exercise Everyday</span> Improves Your <span>Flexibility</span></h1> <div class="banner"> <div class="banner-img" style="background-image: url('https://i.postimg.cc/9XJMtnZf/1.jpg')"> </div> <div class="banner-img" style="background-image: url('https://i.postimg.cc/XqJnzndY/2.jpg')"> </div> <div class="banner-img" style="background-image: url('https://i.postimg.cc/bNZz0Nq6/3.jpg')"> </div> <div class="banner-img" style="background-image: url('https://i.postimg.cc/W3pVds9w/4.jpg')"> </div> </div>


CSS


body{ overflow: hidden; margin: 0; padding: 0; } .banner { position: absolute; width: 100vw; height: 100vh; overflow: hidden; } .banner-img { position: absolute; width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: cover; animation: animate 15s linear infinite; opacity: 1; transform: scale(1.2); } .banner-img:nth-child(1) { animation-name: animate-1; z-index: 3; } .banner-img:nth-child(2) { animation-name: animate-2; z-index: 2; } .banner-img:nth-child(3) { animation-name: animate-3; z-index: 1; } .banner-img:nth-child(4) { animation-name: animate-4; z-index: 0; } @keyframes animate-1 { 0% { opacity: 1; transform: scale(1.2); } 1.5% { opacity: 1; } 23% { opacity: 1; } 26% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } 98% { opacity: 0; transform: scale(1.22); } 100% { opacity: 1; } } @keyframes animate-2 { 23% { opacity: 1; transform: scale(1.2); } 26% { opacity: 1; } 48% { opacity: 1; } 51% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } } @keyframes animate-3 { 48% { opacity: 1; transform: scale(1.2); } 51% { opacity: 1; } 73% { opacity: 1; } 76% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } } @keyframes animate-4 { 73% { opacity: 1; transform: scale(1.2); } 76% { opacity: 1; } 98% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50; text-align: center; font-family: poppins; text-transform: uppercase; background-color: rgba(0, 0, 0, 0.75); padding: 35px 70px; line-height: 1.5; color: #fff; font-size: 50px; } h1 span { display: block; font-size: 35px; }