【发布时间】:2014-02-12 17:41:29
【问题描述】:
我正在尝试在元素进入视口时应用 CSS 过渡效果(即当用户滚动到它时),但不是在此之前。
我已经知道如何使用 CSS 过渡,但是如何仅在元素进入视口时应用它们?
最好的方法是什么?如果有一些图书馆可以简化任务,我很高兴知道。
【问题讨论】:
-
发布和您编写的代码示例
标签: css animation transition viewport
我正在尝试在元素进入视口时应用 CSS 过渡效果(即当用户滚动到它时),但不是在此之前。
我已经知道如何使用 CSS 过渡,但是如何仅在元素进入视口时应用它们?
最好的方法是什么?如果有一些图书馆可以简化任务,我很高兴知道。
【问题讨论】:
标签: css animation transition viewport
试试 CSS3 Animate It,让整个过程像添加几个类一样简单。
http://jackonthe.net/css3animateit/
然后你可以像这样添加类来开始。
<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>
【讨论】:
这是一个很棒的演示:
滑入(向下滚动时) CSS 技巧http://bit.ly/19NN2NJ
从底部框滑入 - CodePen http://bit.ly/1dvNF9U
也许它可以帮助您看到重点。正如您在演示中看到的那样,Point 是检测视口并仅在 onScroll 上应用效果。如果您需要有关错误或特定问题的帮助,只需发送来源 :-) 我会解决。
【讨论】: