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/