当元素进入视口时应用CSS转换

Zei*_*Zei 16 css animation transition viewport

我正在尝试在元素进入视口时(即当用户滚动到视口时)应用CSS过渡效果,但不是之前.

我已经知道如何使用CSS转换,但是如何仅在元素进入视口时应用它们?

这样做最好的方法是什么?如果有一些库来简化任务,我很高兴知道.

Sam*_*rek 13

这是一个很棒的演示:

滑入(向下滚动)框| CSS-Tricks http://bit.ly/19NN2NJ
从底部框中滑入 - CodePen http://bit.ly/1dvNF9U

也许它可以帮助你看点.正如您在演示中看到的那样,Point可以检测视口并仅在onScroll上应用效果.如果您需要有关bug或特定问题的帮助,请发送源:-)然后我会解决.


Jac*_*ack 12

给CSS3 Animate它一个go,使整个过程像添加一些clases一样简单.

http://jackonthe.net/css3animateit/

然后你可以添加这样的类来开始.

<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>  
Run Code Online (Sandbox Code Playgroud)