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

Apr 9, 2016

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

2016-04-09 最終更新日:2016-04-09
css animate web アニメーション

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Similar Posts

最近の投稿

アイキャッチ
ドメインオーソリティの使い道

ドメインオーソリティーとは一言で言えばドメインの価値を数値化したモノです。ドメインに関するものなので中身については全く意味をなさないと思います。ドメインオーソリティーの数値が低いから低品質なコン...

17 Jun 2017

アイキャッチ
個人情報を一切収集しない検索エンジンDuckDuckGoとは?

ネット検索と言えば、日本ならGoogleやYahoo Japan!(検索エンジンはGoogle)経由が多いですね。Bingは少数派といったところでしょうか。 DuckDuckGoという検索エン...

10 Jun 2017

アイキャッチ
ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

今回はフォームバリデータのご紹介です。前回のPHPMailerと関連がありますが、フロントエンドでのバリデートができます。 CSSのフレームワークBootstrap3をお使いの方ならすんなりと...

03 Jun 2017

アイキャッチ
PHPMailerの使い方

今回はあらゆるところで使われているPHP用のメール送信ライブラリphpmailerの使い方を紹介します。 脆弱性がPHPMailer5.2.18より下のバージョンで発生するので新しいバージョン...

28 May 2017

アイキャッチ
画像加工・写真編集が簡単にできるアプリfotorのご紹介

今回は画像加工や編集ができるfotorのご紹介です。アプリの方が有名ですが、実はサイトからも使えるというのはご存じだったでしょうか?公式サイトはコチラ⇒[画像加工・写真編集|Fotor - 無料...

20 May 2017

著者

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

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

タグクラウド

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