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

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

jsFiddle演示- 使用inViewport插件

侦听

load

resize

scroll

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

<div ></div><div ></div><div ></div>

比您的CSS中的：

.box{    width:300px;    height:300px;    margin:500px 50px;    background:red;    transition: 1.5s; }.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") ;});