Javascript CSS3-Animate 元素（如果在视口中可见）（页面滚动）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27462306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3-Animate elements if visible in viewport (Page Scroll)
提问by Ajith
I have added CSS animations to various div elements on my html page.But all the animations played at the same time & i can't see the animations at the bottom of the page.How can i make them play while i scroll down the page ?
我已将 CSS 动画添加到我的 html 页面上的各种 div 元素。但所有动画同时播放，我看不到页面底部的动画。如何在向下滚动页面时让它们播放?
回答by Roko C. Buljan
You'll need to use JSor jQueryto triggeryour CSS3transition / animation
once the element is in viewport**.
一旦元素进入视口**，您将需要使用JS或jQuery来触发您的CSS3过渡/动画
。
jsFiddle demo - Using inViewport plugin
listening to load, resizeand scrollevents to get if an element entered the Viewport.
You can use a small jQuery pluginI've built:
(https://stackoverflow.com/a/26831113/383904)
听load，resize和scroll事件，以获得一个元素是否进入视口。
您可以使用我构建的一个小型 jQuery 插件：（https://stackoverflow.com/a/26831113/383904）
Let's say you have boxes that animate like:
假设您有如下动画框：
<div class="box rotate"></div>
<div class="box scale"></div>
<div class="box translate"></div>
than in your CSS you have:
比在你的 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); }
where the .triggeredCSS3will be assigned dynamically by the plugin:
其中.triggeredCSS3将由插件动态分配：
$(".box").inViewport(function(px){
if(px) $(this).addClass("triggeredCSS3") ;
});
