Web・デザイン

CSS3 アニメーションライブラリ animate.cssについて学ぶ

「animate.css」のアニメーションは各要素のプロバティを編集するだけで色々な効果が得られます。ただ沢山の効果があるので一覧で動かして比較できないかと思い簡単なスクリプトでカテゴリーごとに動きを比較できるようにサンプルをまとめてみました。

公式サイト: https://daneden.github.io/animate.css/

Attention Seekers
Attention Seekers
bounce flash pulse rubberBand shake swing tada wobble jello

bounce

flash

pulse

rubberBand

shake

swing

tada

wobble

jello

Bouncing Exits
Bouncing Exits
bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

Fading Entrances
Fading Entrances
fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig


Fading Exits
Fading Exits
fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

Flippers
Flippers
flip flipInX flipInY flipOutX flipOutY

flip

flipInX

flipInY

flipOutX

flipOutY

Lightspeed
Lightspeed
lightSpeedIn lightSpeedOut

lightSpeedIn

lightSpeedOut


Rotating Entrances
Rotating Entrances
rotateIn rotateInDownLeft rotateInDownRight
rotateInUpLeft rotateInUpRight

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

Rotating Exits
Rotating Exits
rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

Sliding Entrances
Sliding Entrances
slideInUp slideInDown slideInLeft slideInRight

slideInUp

slideInDown

slideInLeft

slideInRight


Sliding Exits
Sliding Exits
slideOutUp slideOutDown slideOutLeft slideOutRight

slideOutUp

slideOutDown

slideOutLeft

slideOutRight

Zoom Entrances
Zoom Entrances
zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

Zoom Exits
Zoom Exits
zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp


Specials
Specials
hinge jackInTheBox rollIn rollOut

hinge

jackInTheBox

rollIn

rollOut

アニメーションのサンプルをテストした一連のソースです。基本的に分類毎の表示は animate.css を利用しています。

CSS

jQuery

HTML

最近の記事

  1. EC-CUBE 4.0 インストール
  1. サーバー環境

    Let’s Encrypt dns-01 自動認証で ワイルドカード…
  2. プログラミング

    python Django Webアプリケーションの構築 基本編
  3. 趣味・実用

    vim テキストエディターを快適に使う
  4. Web・デザイン

    CSS3 グラフィックス transform transition anima…
  5. プログラミング

    気象に関するデータベースを構築してみました。
PAGE TOP