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

一尘不染

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

css

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

阅读 427

2020-05-16

共1个答案

一尘不染

你需要使用 JS 或 jQuery的 ，以触发您的 CSS3 过渡/动画
一旦元素是视**。

jsFiddle演示- 使用inViewport插件

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

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

<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") ;
});

2020-05-16