当元素进入视口时应用 CSS 过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21286761/
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
Apply CSS transition when element comes into viewport
提问by ZeiZei
I'm trying to apply CSS transition effect when an element comes to viewport (i.e. when user scrolls to it), but not before.
我正在尝试在元素进入视口时（即当用户滚动到它时）应用 CSS 过渡效果，但之前没有。
I already know how to use CSS transitions, but how do I apply them only when the element comes to viewport?
我已经知道如何使用 CSS 过渡，但是如何仅在元素进入视口时应用它们？
What it the best way of doing this? If there's some library's to simplify the task, I would be glad to know.
这样做的最佳方法是什么？如果有一些图书馆可以简化任务，我很高兴知道。
回答by Samuel Ondrek
Here is a great demo:
这是一个很棒的演示：
Slide In (as you scroll down) Boxes | CSS-Tricks http://bit.ly/19NN2NJ
Slide in from bottom boxes - CodePen http://bit.ly/1dvNF9U
滑入（向下滚动时）CSS-Tricks http://bit.ly/19NN2NJ
从底盒滑入 - CodePen http://bit.ly/1dvNF9U
Maybe it helps you to see point. Point is detect a viewport and apply effect just onScroll as you can see in demo. If you want help with bug or specific problem just send a source :-) and I'll solve.
也许它可以帮助你看到重点。点是检测视口并仅在 onScroll 上应用效果，如您在演示中所见。如果您需要有关错误或特定问题的帮助，请发送来源:-)，我会解决。
回答by Hyman
Give CSS3 Animate It a go, makes the whole process as simple as adding a few clases.
试试 CSS3 Animate It，让整个过程就像添加几个类一样简单。
http://Hymanonthe.net/css3animateit/
http://Hymanonthe.net/css3animateit/
Then you can just add the classes like this to get started.
然后你可以添加这样的类来开始。
<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>
