CSS 触发器 animation 而不是使用 hover

Question

只是有一个快速的问题，关于我如何触发 CSS animation，它当前设置为 hover 自动执行。

我已经尝试应用关键帧和 animation，但是 animation 已经完成并且没有转换，尽管转换设置正确。

下面的示例只触发 hover 上的 animation，我如何让它触发 onload？

预期结果是 animation 将在页面加载时触发，并且应该仅在元素滚动到视图中时触发。

CSS 和 HTML 代码

 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>

在 JSFiddle 上查看完整代码

Answer 1

ANIMATION 页面加载

为此，您只需将 javascript 代码和一个 id 添加到图中即可。 在示例中，我添加了image_figure id，在 javascript 代码中，我向该image_figure添加了一个 class pageEffect

Javascript - CSS - HTML 代码

 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>

在 JSFiddle 上查看我的代码

Answer 2

您需要编写一些 javascript 代码来执行此操作。 加载文档时向元素添加 class。
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/load_event

或者您可以使用以下插件之一：
https://wowjs.uk/
https://michalsnik.github.io/aos/