CSS trigger animation instead of using hover

Question

Just have a quick question about how would I trigger CSS animation which is currently set for hover to be automatically executed.

I have tried applying the keyframe and the animation however the animation is already finished and is not transitioned although the transition is set correctly.

The example below only triggers the animation on hover, how would I make it trigger onload?

The expected result is an animation to be triggered when the page loads and should trigger only when the element is scrolled into view.

CSS and HTML Code

 main { padding: 5rem 0; display: flex; align-items: center; justify-content: center; } main.carousel { max-height: 500px; overflow: hidden; } main.carousel figure { height: 500px; background: url("https://res.cloudinary.com/dqjhiewf1/image/upload/v1666092821/fullPagePrint/portfolio_fullpage_kg2c1w.png"); width: 550px; background-size: cover; background-position: top center; transform: perspective(1000px) rotateY(-13deg) rotateX(5deg) rotate(1deg) scaleY(0.9) scaleX(0.95) translate(-3%) translateY(-3%); transition: all 8.5s ease, transform 0.5s ease; } main.carousel figure:hover { background-position: bottom center; cursor: pointer; overflow: auto; transform: perspective(1000px) rotateY(0) rotateX(0) rotate(0) scale(1) translate(0) translateY(0); transition: all 8.5s ease, transform 0.5s ease; }

 <main> <a href="https://axie-infinity-lp.vercel.app" target="_blank"> <div class="carousel"> <figure></figure> </div> </a> </main>

View Entire Code on JSFiddle

Answer 1

ANIMATION ON PAGE LOAD

For this you can simply add the javascript code and one id to figure. Here in example I added image_figure id and in javascript code I add one class pageEffect to that image_figure

Javascript - CSS - HTML Code

 window.onload = function() { document.getElementById('image_figure').className = 'pageEffect'; };

 main { padding: 5rem 0; display: flex; align-items: center; justify-content: center; } main.carousel { max-height: 500px; overflow: hidden; } main.carousel figure { height: 500px; background: url("https://res.cloudinary.com/dqjhiewf1/image/upload/v1666092821/fullPagePrint/portfolio_fullpage_kg2c1w.png"); width: 550px; background-size: cover; background-position: top center; transform: perspective(1000px) rotateY(-13deg) rotateX(5deg) rotate(1deg) scaleY(0.9) scaleX(0.95) translate(-3%) translateY(-3%); transition: all 8.5s ease, transform 0.5s ease; }.pageEffect { background-position: bottom center;important: cursor; pointer:important; overflow: auto;important: transform. perspective(1000px) rotateY(0) rotateX(0) rotate(0) scale(1) translate(0) translateY(0),important. transition; all 8.5s ease, transform 0.5s ease !important; }

 <main> <a href="https://axie-infinity-lp.vercel.app" target="_blank"> <div class="carousel"> <figure id="image_figure"></figure> </div> </a> </main>

View My Code on JSFiddle

Answer 2

You need to write some javascript code to do that. Add a class to elements when document loaded.
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Or you can use one of these plugins below:
https://wowjs.uk/
https://michalsnik.github.io/aos/