您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

你需要使用 或 ,以 您的 过渡/动画 一旦元素是视**。

侦听loadresize以及scroll获取事件( 如果元素进入视口) 。 您可以使用我构建的

假设您有动画的盒子,例如:

<div class="@R_611_2419@ rotate"></div>
<div class="@R_611_2419@ scale"></div>
<div class="@R_611_2419@ translate"></div>

比您的CSS中的:

.@R_611_2419@{
    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将由插件动态分配:

$(".@R_611_2419@").inViewport(function(px){
    if(px) $(this).addClass("triggeredCSS3") ;
});
CSS 2022/1/1 18:17:59 有539人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶