CSS3でのアニメーションライブラリanimate.cssの使い方

CSS3でのアニメーションライブラリanimate.cssの使い方

2016-04-09 最終更新日:2016-04-09

ウェブ上でも最近は動きのある要素を取り入れているサイトも多くなってきました。アニメーション動作を取り入れる場合はJavaScript(主にjQuery)が多いのですが、実はCSSだけでも動きのある要素を出すことも出来るんです。まずは公式サイトで動きを確認します。いろいろ出来ますね。

CSS3になって出来る要素がだいぶ増えてきました。JavaScriptでしか出来なかったこともCSSだけで出来る要素も増えてきたので下記のようなブログなどをチェックしてみると良いでしょう。

CSS3のセレクタ全42種 まとめておさらい使い方リファレンス

CSS3は要素によってはまだ対応していないブラウザもありますので HTML5/CSS3ブラウザ対応状況確認のサイトなどでどのブラウザ対応状況を確認してみると良いです。


スポンサーリンク


では早速使い方を見ていきましょう。とはいっても簡単で公式サイトからダウンロードしたCSSを読み込ませて動かせたい要素にclassをつけるだけとお手軽に使えちゃいます。下記はサンプルです。

アニメーションテスト

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="animate.min.css">
</head>
<body>
<h1 class="animated infinite bounce">アニメーションテスト</h1>
</body>
</html>

動かしたい要素にclassでanimatedをつけて下記は動きの名前です。それを付けるとできあがりです。簡単ですね。infiniteを付けるとずーっと動きます。

<div class="animated swing">スウィングするよ</div>
<div class="animated flash">点滅するよ</div>
<div class="animated shake">シェイクするよ</div>
<div class="animated jello">ぶよぶよするよ</div>
  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

これはどんなときに使うのかというとこれだけだと使い道があまりないので、画面に入ったときやクリックしたときやマウスがホバーした時などに使えそうです。

となるとJavaScriptと一緒に使うことになりそうですね。よくあるのが下記のような物です。

スクロール時にアニメーション動作するWOW.jsなどが便利ですがちょっと前までは無料で使えたのですが商用利用の場合有料となっているようです。WOW.js使い方

その他使い勝手が良さそうなjquery.inviewなども良さそうです。

因みに当サイトでもanimate.cssを利用しておりますが、WOW.jsとの併用はしておりません。Waypointsというプラグインを使用しております。

簡単なプラグインですが、使い勝手をよくするためにプラグインを作りました。animate.cssのgithubのプラグインを参考に作ってみました。

下記は例です。デフォルトでホバー時に動作するようになっております。

data属性にて指定したクラスが動くようになっております。data-class=”swing”でホバー時にスウィングします。クラス名は上記の羅列してあるクラス名を入れてください。指定位置に来たら動かす場合はscrollをtrueにします。クリックしたときに動かす場合はclickをtrueにします。

<img src="img/sample1.jpg" width="800" id="div" data-class="swing">
<img src="img/sample2.jpg" id="img" data-class="flash">

<button type="button" id="click">ボタン</button>
<div id="scroll">ここにきたら動きます</div>
<a href="#"><img src="img/sample3.jpg" id="hover" data-class="shake"></a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="/path/to/jquery.animateCssPlus.js"></script>
<script>
$(function() {
  $('#div').animateCssPlus({
			scroll:true
		});
  $('#img').animateCssPlus();
  $('#click').animateCssPlus({
			click:true,
			class:'jello'
		});
  $('#scroll').animateCssPlus({
			scroll:true,
			class:'wobble'
		});
  $('#hover').animateCssPlus();
});
</script>

上記のサンプルでだいたい分かると思います。参考になれば幸いです。

⇒デモを見てみる

jquery.animateCssPlus.jsダウンロード


∞Tadashi Suyama∞

css animate web アニメーション
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

最近の投稿

アイキャッチ
とっとりバーガーフェスタ2017(第7回)に行ってきました

去年も載せましたが今回も行ってきたので感想などを書いてみたいと思います。[⇒去年の記事はコチラ](/blog/private/2016/10/11/burgerfesta.html) 今年も行...

09 Oct 2017

アイキャッチ
ワードプレスでテーマの編集が出来ない対処方法

さて、今回はワードプレスのテーマ編集についてです。テスト用サイトでふと気がついたのですが、あれ?テーマ編集が出来なくなっている!セキュリティ上なくしたのかと思いました。現状のバージョンは4.8....

06 Oct 2017

アイキャッチ
新しくなったfotorの使い方

fotorのサイトが一新されました。HTML5で書き直されて高いパフォーマンスが期待できます。 新しくなった部分のみ記載しておりますので機能的に見たい方は[⇒以前の記事](/blog/app/...

01 Oct 2017

アイキャッチ
WordPressのプラグインReallySimpleSSLを手動で解除する方法

さて今回もトラブル系です。Let's Encryptがいろいろなサーバーに取り入れられ手軽にSSL化が出来るようになりましたが、まだ対応できていないサーバーも多いです。 ワードプレスを入れた際...

23 Sep 2017

アイキャッチ
バックドア型ウィルスにかかった時のワードプレスセキュリティ対策

今回はセキュリティについてご紹介したいと思います。ワードプレスでのセキュリティ対策って何をすれば良いの?という方も多いかと思います。相談が多かったので記事にしました。 ほんとうは怖いワードプレ...

14 Sep 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

css animate web アニメーション
フッターイメージ