Animate.cssの使い方まとめ。サイトに手軽にアニメーションを実装 [CSS3ライブラリ] | KodoCodeリッチなUIのWEBサイトを簡単に実装できるCSSライブラリ「Animate.css」の実装手順、実現できるアニメーションの種類、テクニックを整理しました。Pure CSSだけでも充分に動きのあるサイトを作ることができる時代になり、素敵なデザインのサイトやサービスが増えました。 ただし、自分でCSSを書くのは大変。便利なライブラリがあれば使いたいところです。本記事ではCSS3アニメーションのライブラリとしては最も有名だと思われる「Animate.css」について、利用手順・アニメーション種類・実装テクニックを整理しました。 例えば、このような動きを簡単に実現することができます。 ↓ちなみにこのアニメーションが突然動かなくなって困っているケースが多いようです。詳細は後述しますが、もしアニメーションが動かない場合は視差効果の設定を見直してください。 サンプル Animate.cssのダウンロー
![Animate.cssの使い方まとめ。サイトに手軽にアニメーションを実装 [CSS3ライブラリ] | KodoCode](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b63c2892de85f51f65288a3d14d4f6af1abf9e0/height=288;version=1;width=512/https%3A%2F%2Fkodocode.net%2Fwp-content%2Fuploads%2F2019%2F02%2Fdesign_css_lib_animate.jpg)
