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

萩原賢二のコーディングストック > Web・デザイン > CSS3 アニメーションライブラリ animate.cssについて学ぶ

2018.06.7

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

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

Attention Seekers

bounce flash pulse rubberBand shake swing tada wobble jello

bounce

flash

pulse

rubberBand

shake

swing

tada

wobble

jello

Bouncing Exits

bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

Fading Entrances

fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

Fading Exits

fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

Flippers

flip flipInX flipInY flipOutX flipOutY

flip

flipInX

flipInY

flipOutX

flipOutY

Lightspeed

lightSpeedIn lightSpeedOut

lightSpeedIn

lightSpeedOut

Rotating Entrances

rotateIn rotateInDownLeft rotateInDownRight
rotateInUpLeft rotateInUpRight

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

Rotating Exits

rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

Sliding Entrances

slideInUp slideInDown slideInLeft slideInRight

slideInUp

slideInDown

slideInLeft

slideInRight

Sliding Exits

slideOutUp slideOutDown slideOutLeft slideOutRight

slideOutUp

slideOutDown

slideOutLeft

slideOutRight

Zoom Entrances

zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

Zoom Exits

zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

Specials

hinge jackInTheBox rollIn rollOut

hinge

jackInTheBox

rollIn

rollOut

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

CSS

/*************************
アニメーションの分類のボタン
**************************/
.amimatetipe {
  width: 200px;
  display: inline-block; 
  text-align: center;
  margin: 5px;
  padding: 5px;
  background: yellow;
  border: solid 1px #555;
  border-radius: 10px;
  filter:drop-shadow(
    10px 10px 10px 
    rgba(0,0,0,0.6));
}
/*************************
アニメーションの分類展開後のタイトル
**************************/
.animetitle {
  background: #f0f0f0; 
  text-align:center; 
  line-height: 30px;
  font-size: 25px;
  font-weight: bold;
  margin: -10px -10px 10px -10px;
}
/***************************
アニメーションのサンプル
****************************/
. h2title{
  background-color: skyblue;
}
.animes {
  margin: 10px;
  padding: 10px;
  display: none;  
}
#animation h2 {
  text-align: center;
  line-height: 1.5em;
}
.animes span{
  margin: 10px;
  padding: 5px;
  border: 1px solid #555;
  background-color: skyblue;
  border-radius: 5px;
  line-height: 40px;

}

/*************************

アニメーションの分類のボタン

**************************/

.amimatetipe {

width: 200px;

display: inline-block;

text-align: center;

margin: 5px;

padding: 5px;

background: yellow;

border: solid 1px #555;

border-radius: 10px;

filter:drop-shadow(

10px 10px 10px

rgba(0,0,0,0.6));

}

/*************************

アニメーションの分類展開後のタイトル

**************************/

.animetitle {

background: #f0f0f0;

text-align:center;

line-height: 30px;

font-size: 25px;

font-weight: bold;

margin: -10px -10px 10px -10px;

}

/***************************

アニメーションのサンプル

****************************/

. h2title{

background-color: skyblue;

}

.animes {

margin: 10px;

padding: 10px;

display: none;

}

#animation h2 {

text-align: center;

line-height: 1.5em;

}

.animes span{

margin: 10px;

padding: 5px;

border: 1px solid #555;

background-color: skyblue;

border-radius: 5px;

line-height: 40px;

}

jQuery

jQuery(function($) {
/*********************************************
    アニメーションの分類ごとにアニメーションで表示する    
***********************************************/  
var lastMotion = false;
$(".amimatetipe").click( function () {
  var nowMotion = $(this).next();
  if( lastMotion ){
    var tmpMotion = lastMotion;
    tmpMotion.slideToggle();
    if( nowMotion ){
       nowMotion.css({'display':'block'});
       nowMotion.addClass("animated");
       nowMotion.addClass("fadeInLeft");
       lastMotion = nowMotion;
       nowMotion = false;
    
    }
    else{
      lastMotion = $(this).next();
        lastMotion.css({'display':'block'});
        lastMotion.addClass("animated");
        lastMotion.addClass("fadeInLeft");
    }
  }
});
/**********************************************
  エフェクトのフォバーでサンプルを色変更して強調する
***********************************************/  
$(".amimatetipe").hover(
  function () {
    $(this).css("cursor","pointer");
  },
  function () {
    $(this).css("cursor","default");
  }  
);  
/**********************************************
  アニメーションの分類毎に表示された部分クリックにて閉じる
***********************************************/  
$(".animes").click(function(){
  lastMotion.slideToggle();  
  lastMotion = false;
  nowMotion = false;
});
/**********************************************
  エフェクトのタイトルのホバーでサンプルを色変更して強調する
***********************************************/  
var t;
$(".animes span")
  .hover(
    function(){
      t = $(this).html();
      $("#" + "anime_" + t).css( "background-color","skyblue");
    },
    function () {
      t = $(this).html();
      $("#" + "anime_" + t).css( "background-color","white");
    }    
  );
});

jQuery(function($) {

/*********************************************

アニメーションの分類ごとにアニメーションで表示する

***********************************************/

var lastMotion = false;

$(".amimatetipe").click( function () {

var nowMotion = $(this).next();

if( lastMotion ){

var tmpMotion = lastMotion;

tmpMotion.slideToggle();

if( nowMotion ){

nowMotion.css({'display':'block'});

nowMotion.addClass("animated");

nowMotion.addClass("fadeInLeft");

lastMotion = nowMotion;

nowMotion = false;

}

else{

lastMotion = $(this).next();

lastMotion.css({'display':'block'});

lastMotion.addClass("animated");

lastMotion.addClass("fadeInLeft");

}

});

/**********************************************

エフェクトのフォバーでサンプルを色変更して強調する

***********************************************/

$(".amimatetipe").hover(

function () {

$(this).css("cursor","pointer");

function () {

$(this).css("cursor","default");

}

);

/**********************************************

アニメーションの分類毎に表示された部分クリックにて閉じる

***********************************************/

$(".animes").click(function(){

lastMotion.slideToggle();

lastMotion = false;

nowMotion = false;

});

/**********************************************

エフェクトのタイトルのホバーでサンプルを色変更して強調する

***********************************************/

var t;

$(".animes span")

.hover(

function(){

t = $(this).html();

$("#" + "anime_" + t).css( "background-color","skyblue");

function () {

t = $(this).html();

$("#" + "anime_" + t).css( "background-color","white");

}

);

});

HTML

<div id="animation">
  <div class="amimat>Attention Seekers</div>
  <div class="animes">
  <div class="animetAttention Seekers</div>
  <span id="bounce"></span>
  <span id="flash">fspan>
  <span id="pulse">pspan>
  <span id="rubberBabberBand</span>
  <span id="shake">sspan>
  <span id="swing">sspan>
  <span id="tada">taan>
  <span id="wobble"></span>
  <span id="jello">jspan><hr>
  <h2 id="anime_bounass="animated infinite bounce">bounce</h2>
  <h2 id="anime_flasss="animated infinite flash">flash</h2>
  <h2 id="anime_pulsss="animated infinite pulse">pulse</h2>
  <h2 id="anime_rubb" class="animated infinite rubberBand">rubberBand</h2>
  <h2 id="anime_shakss="animated infinite shake">shake</h2>
  <h2 id="anime_swinss="animated infinite swing">swing</h2>
  <h2 id="anime_tadas="animated infinite tada">tada</h2>
  <h2 id="anime_wobbass="animated infinite wobble">wobble</h2>
  <h2 id="anime_jellss="animated infinite jello">jello</h2>
  
   以下略

<div class="amimat>Attention Seekers</div>

<span id="flash">fspan>

<span id="pulse">pspan>

<span id="shake">sspan>

<span id="swing">sspan>

<span id="jello">jspan><hr>

<h2 id="anime_bounass="animated infinite bounce">bounce</h2>

<h2 id="anime_flasss="animated infinite flash">flash</h2>

<h2 id="anime_pulsss="animated infinite pulse">pulse</h2>

<h2 id="anime_rubb" class="animated infinite rubberBand">rubberBand</h2>

<h2 id="anime_shakss="animated infinite shake">shake</h2>

<h2 id="anime_swinss="animated infinite swing">swing</h2>

<h2 id="anime_wobbass="animated infinite wobble">wobble</h2>

<h2 id="anime_jellss="animated infinite jello">jello</h2>

以下略

投稿者: khagiwara
Web・デザイン

CSS3 グラフィックス transform transition animation を学ぶ

ワードプレス AmCharts Javascript ライブラリーを表示させる

Webサイトデザイン、プログラミング、サーバー構築運用の記録