CSS trigger animation instead of using hover-CodePudding

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

I have tried applying 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 onl oad?

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

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 >
      <figure></figure>
    </div>
  </a>
</main>

View on JSFiddle

CodePudding user response：

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 >
      <figure id="image_figure"></figure>
    </div>
  </a>
</main>

View My Code on JSFiddle

CodePudding user response：

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/