CSS触发动画而不是使用悬停

pbossiut 于 2023-01-06 发布在其他

关注(0)|答案(2)|浏览(175)

只是有一个快速的问题，我将如何触发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>

View Entire Code on JSFiddle

css

来源：https://stackoverflow.com/questions/75001218/css-trigger-animation-instead-of-using-hover

2条答案

按热度按时间

q43xntqr1#

页面加载时的动画

为此，你可以简单地添加javascript代码和一个id到图中。在这里，我添加了image_figureid，并在javascript代码中添加了一个类pageEffect到image_figure
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>

View My Code on JSFiddle

赞(0）回复(0）举报 2023-01-06

xytpbqjk2#

你需要写一些javascript代码来完成这个任务。在文档加载时给元素添加一个类。
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
或者您可以使用以下插件之一：
https://wowjs.uk/
https://michalsnik.github.io/aos/

赞(0）回复(0）举报 2023-01-06