HuwaHuwa

UIUXデザイナー 松木順子

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

 2018年9月11日
約 5 分

[themeone_header type=”h2″ txtalign=”txt-left” subtitle=”” txtcolor=”accent-color1″ decor=”” decorcolor=”” decorheight=”2px”]
animate.css
[/themeone_header]

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

★ダウンロードとデモはこちら
http://joaopereirawd.github.io/animatedModal.js/
[themeone_header type=”h3″ txtalign=”txt-left” subtitle=”” txtcolor=”accent-color1″ decor=”” decorcolor=”” decorheight=”2px”]
使い方
[/themeone_header]
[themeone_drop_cap letter=”1″ color=”accent-color2″ /]外部ファイルを読み込む
animate.min.cssを読み込みます。

 

[themeone_drop_cap letter=”2″ color=”accent-color2″ /]HTML
animatedクラスとbounceクラスを動かしたい要素へ追加。
bounceの他にも色々な効果があるので、公式サイトを参考に、
bounceの部分を変えてみてください。

 

[themeone_header type=”h3″ txtalign=”txt-left” subtitle=”” txtcolor=”accent-color1″ decor=”” decorcolor=”” decorheight=”2px”]
オプション
[/themeone_header]

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

HTML

CSS

 

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

 

[themeone_header type=”h3″ txtalign=”txt-left” subtitle=”” txtcolor=”accent-color1″ decor=”” decorcolor=”” decorheight=”2px”]
動的にアニメーションを制御する
[/themeone_header]

ボタンクリック等のイベントが発生したときにアニメーションを実行したい場合は、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

 

[themeone_header type=”h3″ txtalign=”txt-left” subtitle=”” txtcolor=”accent-color1″ decor=”” decorcolor=”” decorheight=”2px”]
その他cssアニメーションのライブラリ
[/themeone_header]

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-40

animatable
オンマウスのアニメーションが満載。
%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

 

 

投稿者

フリーランスデザイナー & イラストレーター松木 順子
フリーランスのウェブデザイナーです。イラスト、ワードプレスサイト制作、UIUX設計などをやっております。 基本的には納豆とRockと酒があれば幸せです。餡子があればスキップします。
Follow :

コメントする

*
*
* (公開されません)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Facebookへコメントする