トリガCSSアニメーション

見て、アニメーションフレームワークは必要ない！

IE9では CSS transitions をサポートしていないので、これは機能しない。

1. CSSを使用してアニメーション化する最も簡単な方法は、変更を含むクラスを定義し、togglesクラスを使用してそのクラスを要素に適用することである。
2. 代わりに、ScrollMagicのシーンイベントを使用してオブジェクトのインラインスタイルを変更することができる。

残念ながら、CSSアニメーションのタイムラインオブジェクトはない。そのため、トリガされるだけで、スクロールの進捗状況に直接進行することはない。

ただし、アニメーションを特定のスクロール距離の後に元の状態に戻すには、durationを使用することができる。アニメーションにクラスが使用されている場合、シーンに継続時間がある場合、自動的に発生する。

view source