css3动画效果疑问

Question

就是我们常见的网页，当我们往下浏览的时候
先是隐藏的元素

开始可见然后执行动画效果

这种效果是具体怎么实现的楠？
我怎么知道我往下浏览的时候 到什么位置开始元素不隐藏了 然后执行动画。
并且只要我不刷新页面第二次往下浏览的时候 动画不在执行。因为现在页面元素已经不是隐藏状态了。

Answer 1

js判斷位置，加class刪class

Answer 2

判斷捲軸的高度，如果你需要動畫的元素出現在螢幕上就加一個class，用css3的transition做動畫