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

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

  • 2016-04-09  最終更新日:2017-11-16

ウェブ上でも最近は動きのある要素を取り入れているサイトも多くなってきました。アニメーション動作を取り入れる場合は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使い方

WOW.jsのMITライセンスはコチラからダウンロードできます。古いバージョンですがMIT表記されています。

その他使い勝手が良さそうな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

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

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

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

タグクラウド

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