web-dev-qa-db-ja.com

要素がビューポートに入ったときにCSSトランジションを適用する

要素がビューポートに来るとき（つまり、ユーザーがスクロールするとき）にCSSトランジション効果を適用しようとしていますが、それ以前ではありません。

CSSトランジションの使用方法は既に知っていますが、要素がビューポートに来たときにのみCSSトランジションを適用するにはどうすればよいですか？

これを行う最良の方法は何ですか？タスクを簡素化するライブラリがある場合は、喜んでお知らせします。

cssanimationtransitionviewport
16
ZeiZei

これは素晴らしいデモです：

スライドイン（下にスクロール）ボックス| CSS-Tricks http://bit.ly/19NN2NJ
下のボックスからスライドイン-CodePen http://bit.ly/1dvNF9

多分それはあなたがポイントを見るのに役立ちます。ポイントはビューポートを検出し、デモでわかるようにonScrollだけで効果を適用します。バグや特定の問題に関するヘルプが必要な場合は、ソースを送信してください:-)、解決します。

13
Samuel Ondrek

CSS3 Animate Itを試してみると、プロセス全体がいくつかのクラスを追加するのと同じくらい簡単になります。

http://jackonthe.net/css3animateit/

次に、このようなクラスを追加するだけで開始できます。

<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>
12
Jack