CSS3 Animate It

CSS3 Animate Itのご紹介です。

CSS3 Animate Itとは

コンテンツ要素にclassを指定するだけで、アニメーション表示を簡単に実装できるCSS3アニメーションライブラリーです。

  • ・Javascriptで画面スクロールをトリガーにしています。
  • ・jQueryが必要です。

See the Pen CSS3 Animate It *TEST* by Saki (@SAKI) on CodePen.

ダウンロード

CSS3 Animate It :
http://jackonthe.net/css3animateit/

アニメーションリスト、デモ :
http://jackonthe.net/css3animateit/examples/


※2018.2 追記 : CDNありました!

https://cdnjs.cloudflare.com/ajax/libs/css3-animate-it/1.0.3/css/animations.min.css
https://cdnjs.cloudflare.com/ajax/libs/css3-animate-it/1.0.3/css/animations-ie-fix.min.css …IE9以下用
https://cdnjs.cloudflare.com/ajax/libs/css3-animate-it/1.0.3/js/css3-animate-it.min.js

使い方

animations.css と css3-animate-it.js を読み込みます。
※jsの前に、jQueryライブラリをお忘れなく。

html<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/css3-animate-it/1.0.3/css/animations.min.css">
  </head>
  <body>
...

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/css3-animate-it/1.0.3/js/css3-animate-it.min.js'></script>
  </body>
</html>

※2018.2 変更 CDNに変更
※$(window).load(function ..... があるので、 jQuery 3 だとコンテンツロード時に動きません。
→indexOf is not a function エラーになります。

アニメーション

では、動かしてみます。

基本の形はこんな感じ。

code<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>

動かす要素のclassに、"animated ***" を指定します。***はアニメーション名です、
アニメーション名のリストは、こちら。examples

その要素を animatedParent クラスで囲みます。
トリガーとなる画面表示のタイミングは、このanimatedParentクラスの要素がターゲットになります。
animatedクラスを指定した個々の要素ではないことにご注意を!

アニメーションスピード

デフォルト→クラス指定なし, Slow, Slower, Slowest の4段階あります。

code<div class='animatedParent'>
<div class='animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='slow animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='slower animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='slowest animated bounceInDown'>It Works!</div>
</div>

アニメーションの順序

各アニメーション要素の順序を指定できます。

1. 親要素(class='animatedParent')に、アニメーションスピード(data-sequence='xxxxx')を指定します。
2. 子要素(class='animated')に、順序(data-id='1' etc.)を指定します。

code<div class='animatedParent' data-sequence='1000'>
<div class='animated growIn' data-id='1'>Text ID=1</div>
<div class='animated bounceInRight' data-id='2'>Text ID=2</div>
</div>

アニメーション オフセット

animatedParent要素を起点としてアニメーション開始位置のオフセットを指定できます。
data-appear-top-offset='-300' とすると、animatedParentの最初の位置から300pxを超えてスクロール、かつ、表示されるとアニメーションが始まります。

code<div class='animatedParent' data-appear-top-offset='-300'>
<h2 class='animated bounceInDown'>It Works!</h2
</div>

1度だけアニメーション

画面スクロールで再度表示されるとデフォルトでは常時アニメーション表示されますが、最初の一度だけにする場合は、animateOnceクラスを指定します。

code<div class='animatedParent animateOnce'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>

アニメーションDELAY (*NEW)

アニメーションを遅らせて動かすクラスは、次の11通り用意されています。

    delay-250
    delay-500
    delay-750
    delay-1000
    delay-1250
    delay-1500
    delay-1750
    delay-2000
    delay-2500
    delay-3000
    delay-3500
code<div class='animatedParent'>
<div class='animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='delay-500 animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='delay-1000 animated bounceInDown'>It Works!</div>
</div>
<div class='animatedParent'>
<div class='delay-1500 animated bounceInDown'>It Works!</div>
</div>

* * *

スクリプトを書かずにクラス指定だけでできますので、さくっと設置できてよい感じです。
以上!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA