cssでアニメーション animate.css

cssでアニメーション animate.css

animate.css

css3で実現できるアニメーションのライブラリ。
とっても重宝します。
使い方も簡単

★ダウンロードとデモはこちら
http://joaopereirawd.github.io/animatedModal.js/

使い方

外部ファイルを読み込む

animate.min.cssを読み込みます。

HTML

animatedクラスとbounceクラスを動かしたい要素へ追加。
bounceの他にも色々な効果があるので、公式サイトを参考に、
bounceの部分を変えてみてください。

オプション

アニメーションの長さ、待機時間、繰り返し回数を指定する
CSS3のプロパティで指定します。仮に、animation_exというクラスを定義し、アニメーションの動きを操作すると以下になります。

HTML

CSS

アニメーションをループさせる

infiniteクラスをつけておくとアニメーションがループします。

動的にアニメーションを制御する

ボタンクリック等のイベントが発生したときにアニメーションを実行したい場合は、JavaScriptを使ってクラスを動的に付けてあげます。「クリックされる」→「クラスが付く」→「動く!」という流れです。
jQueryを使用し、動的にクラスを追加します。

jQueryを読み込む

java script

クリックが発生したときにaddClass()で要素にanimatedクラス、swingクラスを付加し、アニメーションを発生させます。
付加したクラスをそのままにしておくと、2回目以降のクリックでアニメーションが発生しなくなってしまうので、次クリックされたときのために外しておきます。アニメーションが終了したときに発生するイベントは”animationend”です。”animationend”が発生したらremoveClass()を使用し追加したクラスが外れるようにしておきます。

アニメーションイベントについては下記のリンクを参照ください。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Using_animation_events

こちらの記事を参考にさせていただきました。
★【CSS3】Animate.cssを使って簡単にアニメーションを実装する。(バシャログ)
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-animatedmodal.html

その他cssアニメーションのライブラリ

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-26-19-29-40

Effeckt.css
ボタンアニメーションだけでなく、モーダルなどもあり。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-26-19-29-55

animatable
オンマウスのアニメーションが満載。

Back to Top