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

サイト内検索

最近の投稿

アイキャッチ
正規表現はじめの一歩

今回は正規表現です。たまにしか使わないのですぐに忘れてしまいますのでまとめておきます。 文字列の検索時にある条件にマッチしたものを表示させるものです。 エディターにも検索条件に正規表現という検...

07 Oct 2018

アイキャッチ
ワードプレス記事一括削除する方法

ワードプレスで記事を一括削除する方法が意外と簡単なことに気がつきました。記事を大量に削除する場合はあまりなかったのですが、調べてみたら簡単なことでした。 大量のデータをインポートする時に失敗し...

30 Sep 2018

アイキャッチ
メールはGmailに限る

大分間が空きました。。。さて今回はGmailをご紹介します。最近ではチャット系アプリが主流ですが、それでもやはりメールはなんだかんだで使います。いつも悩まされるのはスパムメールですが、Gmail...

25 Sep 2018

アイキャッチ
大山の大献灯・和傘灯りに行った感想

大山の大献灯・和傘灯りに初めて行って参りました。13日の夜に行ってきましたがこんなイベントをやっていることを知らなかったのでご紹介します。和傘のライトアップで日本の夏の雰囲気が良いですね。 大...

23 Aug 2018

アイキャッチ
出雲神話祭り・花火大会

お盆休み中に出雲の花火大会に行って参りました、今年は8月12日(日)でした、開催日は毎年違いますので確認しておきましょう。だいたいこのあたりだった気がします。8,000発の花火で例年13万人が来...

21 Aug 2018

著者

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

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

タグクラウド

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