サイト移転しました → GLOSSY

     
  1. >
  2. >
  3. 豊富なCSSアニメ…
  • 最終更新日:
  • 投稿者: @signpostme

豊富なCSSアニメーションを簡単に実装することができる「Animate.css」を使ってみよう

アニメーションの実装と言えばjQueryを利用した実装が主流でしたが、CSS3 animationというものが出てきてからはCSSでアニメーションを作ってしまうことが多くなってきましたね。今回は、クールなCSSアニメーションを簡単に実装できる「Animate.css」をご紹介します。

「Animate.css」を利用すれば…

なんとCSSを読み込ませて少しのクラスを要素に追加してやるだけでアニメーションが実装できてしまいます。

最近はちょっとしたアニメーションがあるWebサイトが主流だと思いますので、アクセントとして利用してみると良いかも。ただ、一部ブラウザには対応していないので注意が必要です。

ani01

Animate.css

Animate.cssの使い方

まずは配布サイトからAnimate.css本体をダウンロードしてきて、HTMLに読み込ませましょう。

<link href=”css/animate.min.css” rel=”stylesheet”>

なお、CDNを利用する場合はこちらからどうぞ。

<link href=”//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css” rel=”stylesheet”>

読み込ませたら、アニメーションを追加したい要素に対してクラス.animated .アニメーション名を追加します。

<div class=”animated bounce“>

上記のような感じですね。たったこれだけでアニメーションが実装できちゃいます。

アニメーションの種類

Animate.cssでは、適切に調整されたアニメーションがたくさん用意されています。

動き方などのサンプルは配布サイトにて確認することができますので、自分の使いたいアニメーションの名前を覚えておくと良いでしょう。

Animate.css GitHub

新着記事を見る

TOP