只是有一个快速的问题,我将如何触发CSS动画,这是目前设置为悬停自动执行。
我已经尝试应用关键帧和动画,但是动画已经完成,虽然过渡设置正确,但没有过渡。
下面的例子只在悬停时触发动画,我如何让它在加载时触发?
预期的结果是在页面加载时触发动画,并且应该仅在元素滚动到视图中时触发。
- 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>
2条答案
按热度按时间q43xntqr1#
页面加载时的动画
为此,你可以简单地添加javascript代码和一个id到图中。在这里,我添加了image_figureid,并在javascript代码中添加了一个类pageEffect到image_figure
Javascript - CSS - HTML代码
View My Code on JSFiddle
xytpbqjk2#
你需要写一些javascript代码来完成这个任务。在文档加载时给元素添加一个类。
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
或者您可以使用以下插件之一:
https://wowjs.uk/
https://michalsnik.github.io/aos/