CSS3-Animate元素（如果在视口中可见）（页面滚动）

  • Z时代
  • 2024-01-10
  • 分类：问答

我在html页面上的各个div元素中添加了CSS动画。但是所有动画同时播放，并且我无法在页面底部看到动画。如何在向下滚动页面时播放它们？

回答：

你需要使用 或 ，以 您的 过渡/动画

一旦元素是视**。

侦听load，resize以及scroll获取事件（ 如果元素进入视口） 。 您可以使用我构建的

假设您有动画的盒子，例如：

<div class="box rotate"></div>
<div class="box scale"></div>
<div class="box translate"></div>

比您的CSS中的：

.box{
    width:300px;
    height:300px;
    margin:500px 50px;
    background:red;
    transition: 1.5s; /* THE DURATION */
}
.rotate.triggeredCSS3    {transform : rotate(360deg); }
.scale.triggeredCSS3     {transform : scale(1.6); }
.translate.triggeredCSS3 {transform : translate3d(400px,0,0); }

其中.triggeredCSS3将由插件动态分配：

$(".box").inViewport(function(px){
    if(px) $(this).addClass("triggeredCSS3") ;
});

以上是 CSS3-Animate元素（如果在视口中可见）（页面滚动） 的全部内容， 来源链接： utcz.com/qa/409784.html

回到顶部