CSS3 アニメーション

CSS3 アニメーション概要

CSS3 でアニメーションを実装する方法は大きく分けて以下の2種類があります。

Transition

Animation

transition の設定方法

Transition によるアニメーションでは、開始時と終了時における状態(プロパティの値)を指定します。

開始時と終了時を定義する方法には、次の二種類あります。

  • :hover などの擬似クラス(:active, :focus 等)を使用する
  • javascript を使用して、CSS のプロパティを変更する

簡単なロールオーバー

基本的な指定方法

  • 要素の初期状態の CSS の設定を記述し、そこに transition プロパティ(詳細後述)を指定
  • その要素の hover などの擬似クラスにアニメーション実行後の状態の CSS の設定を記述
.sample {
  /* 初期状態の CSS の設定 */
  /* transition プロパティの指定 */  
}
 
.sample:hover {
  /* アニメーション最終状態(到達点)の CSS の設定 */
}

以下は、マウスオーバーすると背景色と文字色を0.7秒かけて変える例です。この例では、transition プロパティには、アニメーションの継続時間(0.7s)のみを指定しています。

  • background が「lightblue」から「darkblue」に0.7秒かけて変化します
  • color が「darkblue」から「white」に0.7秒かけて変化します
/* 初期状態の CSS の設定を記述 */
.sample01 {
  border: 1px solid #76A3AF;
  border-radius: 4px;
  padding: 10px 20px;
  display: inline-block;
  text-align: center;
  background: lightblue;  /* アニメーション対象の初期設定の値 */
  color: darkblue;  /* アニメーション対象の初期設定の値 */
  /* transition プロパティの指定 */
  transition: 0.7s;
}
 
/* アニメーション最終状態(到達点)の CSS の設定を記述 */
.sample01:hover {
  background: darkblue;
  color: white;
}
<p class="sample01">Sample01</p> 

Sample01

以下は、マウスオーバーすると影の位置と文字色を1秒かけて変える例です。

/* 初期状態の CSS の設定を記述 */
.sample02 {
  border: 1px solid #CCC;
  border-radius: 5px;
  width: 150px;
  height: 60px;
  line-height: 60px;
  font-weight: bold;
  text-align: center;
  color: green;  /* アニメーション対象の初期設定の値 */ 
  box-shadow: 20px 10px 2px #8D9EB8;  /* アニメーション対象の初期設定の値 */
  transition: 1s;   /* transition プロパティの指定 */
}

 /* アニメーション最終状態(到達点)の CSS の設定を記述 */
.sample02:hover {
  color: orange;
  box-shadow: -20px 10px 5px #8D9EB8;
}
<div class="sample02">Sample02</div>
Sample02

以下は、マウスオーバーすると transform: rotate() 関数を使って回転させる例です。

.sample03 {
  width: 100px;
  height:100px;
  line-height: 100px;
  text-align: center;
  margin: 50px 0;
  border: 1px solid #BBB232;
  background-color: #F7ED91;
  color: #ECB94C;   /* アニメーション対象の初期設定の値 */ 
  transition: 0.5s;   /* transition プロパティの指定 */
}
/* アニメーション最終状態(到達点)の CSS の設定を記述 */
.sample03:hover {
  color: #E47609;
  transform: rotate(360deg);
}
<div class="sample03">Sample03</div>  
Sample03

以下は、マウスオーバーすると透明度を0.7から1.0 に、 transform: scale() 関数を使って大きさを1.1倍にしてする例です。外側の div 要素に overflow: hidden; を指定して、写真を拡大しても外側の div 要素をはみ出ないようにしています。

<div class="sample_p"><img src="../images/flower.jpg" alt=""></div>
.sample_p {
  width: 150px;
  height: 132px;
  overflow: hidden;
}
.sample_p img {
  opacity: 0.7;
  width: 150px;
  transition: all 0.5s;
}
.sample_p img:hover {
  opacity: 1.0;
  transform: scale(1.1, 1.1);
}
flower

transition を利用するとこのように簡単に、単純なアニメーションを設定することができます。transition の場合は、始点と終点の状態を指定すると、ブラウザが自動的にアニメーションを設定してくれます。言い換えると、途中の変化などは指定できません。

これまでの例では、ショートハンドの書式で transition プロパティの値にアニメーションの継続時間のみを指定していましたが、他にも指定できる項目があります。

transition のプロパティ

transitionでアニメーションを定義する場合、以下の4つのプロパティを指定することができます。

  • transition-property : トランジションを適用する対象の CSS プロパティの名前を指定
    デフォルトの値:all(すべての要素を対象)
  • transition-duration : トランジションにかかる時間(アニメーションの継続時間)を指定
    デフォルトの値:0s(0秒。アニメーションなしで瞬時に変化)
  • transition-timing-function : トランジションの速度変化(イージング)を指定
    デフォルトの値:ease
  • transition-delay : トランジションを開始するまでの時間(遅延時間)を指定
    デフォルトの値:0s(0秒。遅延無し)

これらの項目は transition プロパティでまとめて(ショートハンドで)定義することも、個別に設定することも可能です。

詳細はtransition プロパティ表を参照ください。

個別に指定する方法

以下のように個別に指定することができます。

transition-property: background;  /* 対象のプロパティの名前 */
transition-duration:1s;  /* アニメーションの継続時間  */
transition-timing-function:ease-out;  /* イージング */
transition-delay:0.5s;   /* 遅延時間  */

対象プロパティを複数指定した場合

transition-property で複数の CSS プロパティを指定した場合、そのそれぞれに transition-duration など他のプロパティの値をコンマ区切りで指定することが可能です。

.sample04 {
  color: #449F32;
  background-color: #D4F8BA;
  transition-property: color, background-color;
  transition-duration: 1s, 2s;
  transition-delay: 0s, 1s;
}
.sample04:hover {
  color: #D05557;
  background-color: #F4D2D2;
}

上記のように指定した場合、color が1秒間で変化し、その後(background-color の遅延時間が1秒) background-color が2秒間で変化します。

Sample04

プロパティの数と設定の数が合わない場合

足らない場合 → 指定された分がセットで繰り返されます。

transition-property: opacity, left, top, height;
transition-duration: 1s, 2s;
 
//以下のように指定したのと同じ
transition-property: opacity, left, top, height;
transition-duration: 1s, 2s, 1s, 2s;

多い場合 → 余りは切り捨てられます。

transition-property: width, color;
transition-duration: 1s, 2s, 1s, 2s;
 
//以下のように指定したのと同じ
transition-property: width, color;
transition-duration: 1s, 2s;
まとめて指定する方法

まとめて指定する場合(ショートハンド)は、プロパティを半角スペース区切りで指定します。

transition: 対象のプロパティ アニメーションにかかる時間 イージング 遅延時間;
transition: transition-property transition-duration transition-timing-function transition-delay;
  • 各プロパティは順不同で記載することが可能です
  • 但し、アニメーションにかかる時間と遅延時間の順序だけは逆にすることはできません
  • 各プロパティは省略可能で、省略した場合はデフォルトの値が適用されます(表参照
/* まとめて指定する例 */
transtion: background-color 0.5s linear 1s;

複数の設定の適用

複数の設定をカンマ区切りで同時に指定することも可能です。その場合、transition-property のターゲットごとにカンマ区切りで指定します。

transition: width 0.5s ease 0s, height 0.5s ease-in 0.5s, line-height 0.2s linear 1s;

上記の場合、width が0.5秒で変化し、その後(height の遅延時間が0.5秒) height が0.5秒で変化し、続いて(line-height の遅延時間が1秒)line-height が0.2秒で変化します。実際のコードは以下になります。

Sample05

実際のコードは以下になります。

.sample05 {
  width: 80px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #C56E70;
  border-radius: 4px;
  text-align: center;
  margin: 30px 0;
  color: #C14547;
  background-color: #F5B9BA;
  transition: width 0.5s ease 0s, height 0.5s ease-in 0.5s, line-height 0.2s linear 1s;
}
.sample05:hover {
  width: 120px;
  height: 70px;
  line-height: 70px;
}
transition プロパティ
プロパティ 意味と使用例 デフォルト値
transition-property アニメーションさせる対象の CSS プロパティを指定。
背景色、文字のサイズ等、どの CSS プロパティを変化させるか(カンマ区切りで複数指定可能)
ここに指定したプロパティだけが、トランジションによりアニメーションする。通常、それ以外のプロパティの変更は即座に反映される
(例)transition-property: background;
all(すべての要素を対象)
transition-duration アニメーションにかかる時間(完了するまでの所要時間)を指定。
開始時の状態から終了時の状態に変化するのに何秒かけるかを 秒単位(s)、もしくはミリ秒単位(ms)で指定。 単一の値を指定すると、すべてのプロパティのトランジションの所要時間として適用される。複数の値を指定すると、プロパティごとにトランジションの所要時間として異なる値を指定することができる。
(例)transition-duration:1s;
0 秒(アニメーションなしで瞬時に変化)
transition-timing-function 加速曲線を指定するキーワードや cubic-bezier 関数を指定。
(例)transition-timing-function:ease-out;
ease
transition-delay アニメーションを開始するまでの時間(遅延時間)
マウスオーバなどのアクションがあってから、何秒後にアニメーションを始めるかを 秒単位(s)、もしくはミリ秒単位(ms)で指定
(例)transition-delay:0.3s;
0 秒(遅延無し)
transition 全ての項目をまとめて指定するショートハンドプロパティ。複数のプロパティ名の指定も可能
transition: アニメーションの時間 対象のプロパティ イージング 遅延時間;
(例)transtion: background-color 1s ease-out 0.3s;
各プロパティは順不同で記載することが可能だが、アニメーションにかかる時間と遅延時間の順序だけは逆にできない。
各プロパティは省略可能で、省略した場合はデフォルト値が適用される
transition-timing-function

アニメーションの速度変化(タイミング関数:イージング)は以下の値を設定することが可能です。この他に、cubic-bezier 関数を使って、イージングを独自に設定することもできます。

参考:
animation-timing-function(MDN)
timing-function/タイミング関数(MDN)

transition-timing-function で指定する値
既定値 意味・内容
ease ゆっくり入り、加速し、ゆっくり終わる(デフォルト)
cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear 一定の速度(等速直線運動)
cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in ゆっくり入り、加速して終わる
cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out 速く入り、ゆっくり終わる
cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out easeよりも、ゆっくり入り、加速し、ゆっくり終わる
cubic-bezier(0.42, 0, 0.58, 1.0)
step-start 開始時点で終了状態の値に変化する。steps(1, start)と同じ。
step-end 終了時点まで変化せず、終了時点で終了状態の値に変化する。steps(1, end)と同じ。
steps(ステップ数, ディレクション) 時間的変化を「ステップ数」の数のステップに等分に区切って不連続に変化させる。「ステップ数」は 1 以上の<整数値> で、ステップ関数を構成する等間隔の段数を示すもの。「ディレクション」にキーワード start が指定されると、アニメーションの開始時に最初のステップが発生する。キーワード end が指定された場合は、アニメーションの完了時に最後のステップが発生する。(animation と steps を使うとパラパラアニメのようなものを作ることもできます。「css3で作るパラパラアニメ」)

ease と同じイージングを cubic-bezier 関数を使って設定する例

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0) ;

以下のサイトでいろいろなイージングの中から好きなものを選択して、cubic-bezier 関数の値を取得することができます。

http://easings.net/ja

以下は、transform: translateX(400px) で linear、ease-in、ease-out、cubic-bezier(0.68, -0.55, 0.265, 1.55) をそれぞれ指定した例です。「Start」ボタンをクリックするとアニメーションを開始します。

linear
ease-in
ease-out
cubic-b

:active を使う

疑似クラス「:active」も CSS3 transition のトリガーに使えます。

:active はマウスがクリック、またはマウスがダウンされた状態を表します。

但し、クリックは一瞬で終わるので、アニメーションの時間により、マウスを押し続ける必要があります。

設定は単に「:hover」の代わりに「:active」を記述します。

.sample07 {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 30px;
  background: #F1E9E9;
  color: #C95A5C;
  border: 1px solid #F8DADB;
  transition: all 1s;
}
 
.sample07:active {  /* :active を指定 */
  width: 160px;
  height: 160px;
  line-height: 160px;
  border-radius: 80px;
  background: #EB0A0E;
  color: #FFF;
  font-size: 28px;
  border: 5px solid #E4DD1A;
}

この例では「transition: all 1s」と指定しているので、全てのプロパティがアニメーションの対象になっていて、マウスを押し続けると1秒間で全てのプロパティ(text-align: center を除く)が変化します。

:active

:focus を使う

要素にフォーカスした際にアニメーションさせるには、「:focus」を利用します。

:focus 擬似クラスは、ユーザーの操作で要素がフォーカスされた際のスタイルを指定するものです。例えば、フォームの入力欄にカーソルを合わせてテキストが入力できるようになった状態などを表します。

フォームのテキストボックスにフォーカスした際に、アニメーションで変化するようにする場合は、フォーカスしたときのデザインを :focus で指定します。

以下はテキストボックスにフォーカスすると、ボーダーと背景色を変化させる例です。

<input class="sample08" type="text" size="15"> 
.sample08 {
  height:30px;
  background-color: white;
  border: 1px solid #999;
  border-radius: 4px;
  outline: none;
  transition: 2s;
}
 
.sample08:focus {
  background-color: #DFF7C9;
  border: 1px solid #54C43D;
  outline: 0;
}

以下は、bootstrap のフォーム要素に設定してある transition の例です。フォーカスすると border-color と box-shadow が変化します。

.sample09 {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.sample09:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

bootstrap のフォーム要素の例

クリックで transition /CSS

CSS3 だけでクリックでアニメーション(transition)させるには、以下のようにチェックボックスの「:checked」を利用して、transition をさせたい要素を「label」で囲めばチェックボックスと連動します。

参考にさせていただいたサイト:CSS3だけでクリックでアニメーションさせる(webopixel)

<input type="checkbox" id="trigger">
<label for="trigger">
  <div class="sample10"></div>
</label>  

「~」は間接セレクタと呼ばれ、CSS3 で追加されたセレクタです。以下は、margin-left: 200px で位置を移動させ、高さと幅及び背景色を変更する例です。

.sample10 {
  width: 30px;
  height: 30px;
  background: #EFCECF;
  border: 1px solid #C79A9B;
  margin-left: 0;
  transition: all 1s;
}
 
/* チェックボックス(input 要素)は非表示にします */
#trigger {
  display: none;
}
 
#trigger:checked ~ label .sample10 {
  margin-left: 200px;
  width: 100px;
  height: 50px;
  background: #F17C7E;
}

margin-left の代わりに、以下のように transform: translate(200px) を使って移動させることもできます。

#trigger:checked ~ label .sample10 {
  transform: translate(200px);
  width: 100px;
  height: 50px;
  background: #F17C7E;
}

クリックで transition /jQuery

jQuery を使ってクリックでアニメーション(transition)させるには、任意のクラスにアニメーションの内容(アニメーション実行後の状態)を指定して、 toggleClass() などを使ってクリックした際にそのクラスを付けたり外したりします。(jQuery を読み込んでおく必要があります)

<div class="sample11"></div>
.sample11 {
  width: 50px;
  height: 50px; 
  border: 1px solid #62A3AD;
  background-color: #9FE1F1; 
  transition: all 1s;
}
 
/* アニメーション実行後の状態を任意のクラスに指定 */
.sample11.jq_trans {
  width: 100px;
  height: 100px; 
  border: 2px solid #59935B;
  border-radius: 50px;
  background-color: #ABF4A8; 
}
jQuery(function($){ 
  $('.sample11').click(function(){
    $(this).toggleClass('jq_trans');
  });
});

以下は入れ子にした div 要素の親要素にクリックイベントを設定して両方の要素にアニメーションを行う例です。

<div class="sample12">
  <div class="sample12_inner"></div>
</div>
.sample12 {
  width: 400px;
  height: 200px;
  background-color: #BEDBF7;
  border: 1px solid #658CBB;
  transition: all 3s;
}
.sample12_inner {
  margin: 20px;
  width: 50px;
  height: 50px;
  background-color: #F4C9CA;
  border: 1px solid #CD8E8F;
  transition: all 1s;
}

.sample12.jq_trans {
  background-color: #294F88;
  border: 1px solid #173072;
}

.sample12_inner.jq_trans {
  transform: rotate(1440deg) translate(300px, 100px);
  background-color: #B7292B;
  border-color: #ED8C8D;
}
$('.sample12').click(function(){
  $('.sample12, .sample12_inner').toggleClass('jq_trans');
});

以下は、前述の例とほぼ同じですが、内側の div 要素の rotate() と translate() の順番を入れ替えた例です。

.sample12_inner.jq_trans {
  transform: translate(300px, 100px) rotate(1080deg);
  background-color: #B7292B;
  border-color: #ED8C8D;
}

JavaScript の機能をスムーズにするためのトランジション

参考サイト:CSS transition の使用(MDN)

以下は jQuery を使用して、クリックした位置にボールを移動させる例です。

<div class="sample14">
  <div class="sample14_circle"></div>
</div>

jQuery を使用して、クリックした場所にボール(.sample14_circle)を移動させます。

背景の div 要素(.sample14)でクリックした位置を取得して、移動距離を算出します。

  • e.pageX:水平方向のクリックした位置
  • e.pageY:垂直方向のクリックした位置
  • $(this).offset().left:水平方向のボールの位置
  • $(this).offset().top:垂直方向のボールの位置
  • 15px:ボールの半径
  • e.pageX - $(this).offset().left - 15 + 'px':水平方向の移動距離
  • e.pageY - $(this).offset().top - 15 + 'px':垂直方向の移動距離
$('.sample14').click(function(e){
  $('.sample14_circle').css({
    left: e.pageX - $(this).offset().left - 15 + 'px',
    top: e.pageY - $(this).offset().top - 15 + 'px'
  });
  return false;
});

上記の記述だけだと、一瞬でボールが移動しますが、単に要素へトランジションを追加することで、変化がスムーズに発生するようになります。またこのサンプルではイージングを指定しています。

.sample14 {
  position: relative;   /*ボールの基準とします*/
  width: 400px;
  height: 250px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #e6fcfa;  
}

.sample14_circle{
  width:30px;
  height:30px;
  border-radius:15px;
  background: #4C926C;
  position:absolute;   /*絶対配置にします*/
  top:10px;
  left:10px;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) ;  
}

枠内でクリックした位置にボールが移動します。

transform

アニメーションの定義の際に通常の CSS のプロパティに加えて、transform プロパティによる変形処理を適応することができます。

以下は、transform 2D の rotate() を使った例です。transform で変形処理を行うと transform-origin が適用され、その初期値(デフォルト)「50% 50%」によってローカル座標系の原点の位置がボックスの中央にセットされます。

<div class="sample15">rotate()</div>
.sample15 {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: #2A94B9;
  border: 1px solid #317AAF;
  background-color: #B9DFFB;
  transition: all 1s;
}
.rotate720 {
  transform: rotate(720deg); 
}
$('.sample15').click(function(){
  $(this).toggleClass('rotate720');
});

以下の正方形をクリックすると、transform-origin の初期値(デフォルト)「50% 50%」が適用され、ボックスの中央を原点に回転します。

rotate()

以下は、transform-origin: right bottom; を追加して、正方形の右下を原点に回転させる例です。

<div class="sample16">rotate()</div>
.sample16 {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: #2A94B9;
  border: 1px solid #317AAF;
  background-color: #B9DFFB;
  transition: all 1s;
  transform-origin: right bottom;  /*前述のサンプルとの違いはこの部分のみ*/
}
.rotate720 {
  transform: rotate(720deg); 
}
$('.sample16').click(function(){
  $(this).toggleClass('rotate720');
});
rotate()

以下は rotateY() を使った例ですが、正方形をクリックすると、transform-origin の初期値(デフォルト)「50% 50%」が適用され、ボックスの中央を原点に回転します。HTML や CSS は前述のサンプルとほぼ同じです。(transform-origin の指定なし)

.sample17 {
  margin: 30px 0;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: #2A94B9;
  border: 1px solid #317AAF;
  background-color: #B9DFFB;
  transition: all 1s;
}

.rotateY720 {
  transform: rotateY(720deg); 
}
$('.sample17').click(function(){
  $(this).toggleClass('rotateY720');
});
rotateY()

以下も rotateY() を使った例ですが、transform-origin: right; を追加して右辺を中心に回転させる例です。HTML と jQuery は前述のサンプルと同じです。CSS は transform-origin: right; が追加されただけです。

.sample18 {
  margin: 30px 0;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: #2A94B9;
  border: 1px solid #317AAF;
  background-color: #B9DFFB;
  transition: all 1s;
  transform-origin: right;
}
rotateY()

以下は translate() を使って移動させる例です。また opacity: 0; をアニメーション実行後の CSS に設定してフェードアウトするようにしています。HTML は前述のサンプルと同じです。

.sample19 {
  margin: 30px 0;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: #2A94B9;
  border: 1px solid #317AAF;
  background-color: #B9DFFB;
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sample19:hover {
  transform: translate(300px);
  opacity: 0;
}
translate()

translate と position の違い

X 軸と Y 軸の移動だけなら、position プロパティを使っても同じことができますが、translate を使う方が、描画のパフォーマンスが良いとのことです。基本的には、translate を使う方がスムーズに動くようです。

以下は skewX() を使って X 軸に対して傾斜させる例です。

.sample20 {
  width: 200px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  background-color: #096313;
  color: #FFF;
  transition: all .5s;
}

.sample20:hover {
  transform: skewX(-40deg);
}
skewX()

以下は、skew(-40deg, 60deg) を使って X 軸と Y 軸に対して傾斜させる例です。

.sample21:hover {
  transform: skew(-40deg, 60deg);
}
skew()

以下は、translate() rotate() scale() を指定した例です。イージングとオパシティも指定しています。

<div class="sample22"></div>
.sample22 {
  width: 50px;
  height: 50px;
  background-color: #D8BFF8;
  transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.mix {
  transform: translate(300px) rotate(720deg) scale(3,2);
  opacity: 0.3;
}
$('.sample22').click(function(){
  $(this).toggleClass('mix');
});

以下は擬似要素を使ってメニューボタンのアニメーションを作成する例です。

2本のバーと×印は、:before 及び :after 擬似要素の指定で、ボーダー(border-top: 4px solid #666;)を使って表現しています。translateY(-6px)、translateY(6px) で2本のバーの間隔を指定して、rotate(45deg)、rotate(-45deg) で角度を変えて×印へアニメーションさせています。

<a href="#" class="menu_button"></a>  
.menu_button {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid #999;
}
.menu_button:before,
.menu_button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  margin-top: -2px;
  border-top: 4px solid #666;
  transition: transform 0.3s;
}
.menu_button:before {
  transform: translateY(-6px);
}
.menu_button:after {
  transform: translateY(6px);
}
.menu_button.active:before {
  transform: rotate(45deg);
}
.menu_button.active:after {
  transform: rotate(-45deg);
}

jQuery を使って、クリックしたら、active というクラスをトグルさせ、2本のバーの角度を変更してアニメーションさせます。

e.preventDefault() はデフォルトの挙動(この場合はリンク先への移動)を抑止しています。e.preventDefault() の代わりに、最後に return false を指定しても同じことが可能です。

$(".menu_button").click(function(e) {
  e.preventDefault();
  $(this).toggleClass("active");
  //return false;
});

以下は前述の例と似ていますが、最初は2本のバーを交差させて+印にしておき、クリックすると角度を変更してー印にアニメーションする例です。

<a href="#" class="plus_minus"></a>  
plus_minus {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid #999;
}
.plus_minus:before,
.plus_minus:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  margin-top: -2px;
  border-top: 4px solid #666;
  transition: transform 0.3s;
}
.plus_minus:before {
  transform: rotate(90deg);
}
.plus_minus.active:before {
  transform: rotate(0deg);
}
$(".plus_minus").click(function() {
  $(this).toggleClass("active");
  return false;
});

以下は2本のバーの代わりに3本のバーにした場合のバリエーションです。3本目のバーは、.menu_button2:after に border-bottom: 4px solid #999 を指定して表示しています。

<a href="#" class="menu_button2"></a>  
.menu_button2 {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 1px solid #999;
}
.menu_button2:before,
.menu_button2:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  margin-top: -8px;
  border-top: 4px solid #999;
  transition: transform 0.3s;
}
.menu_button2:after {
  border-bottom: 4px solid #999;
  padding-top: 8px;
}

.menu_button2:before {
  transform: translateY(-6px);
}
.menu_button2:after {
  transform: translateY(6px);
}
.menu_button2.active:before {
  transform: rotate(45deg);
  margin-top: -2px;
}
.menu_button2.active:after {
  transform: rotate(-45deg);
  border-bottom: none;
  padding-top:0;
  margin-top: -2px;
}
$(".menu_button2").click(function(e) {
    e.preventDefault();
    $(this).toggleClass("active");
  });

animation の設定方法

animation プロパティでは、キーフレームを利用したアニメーションを設定することができます。言い換えると animation プロパティを使用してアニメーションを行うには、キーフレームを作成する必要があります。

キーフレーム @keyframes

キーフレーム
始点と終点の間に複数のアニメーションの変化の設定を記述するもので、
@keyframes キーフレーム名 {…} という形で記述します。
  • @keyframes の中には始点と終点を含むキーフレームの設定を記述します
  • 始点の設定は 0% {…} または from {…}に、終点の設定は 100% {…} または to {…} に記述します
  • 必要に応じて 1 ~ 99% のキーフレームを追加します
@keyframes キーフレーム名 {
  0% { 始点のキーフレーム:アニメーションさせたいプロパティの初期状態 }
  100% { 終点のキーフレーム:アニメーションさせたいプロパティ最終状態 }
}

または、

@keyframes キーフレーム名 {
  from { 始点のキーフレーム:アニメーションさせたいプロパティの初期状態 }
  to { 終点のキーフレーム:アニメーションさせたいプロパティ最終状態 }
}

50% のキーフレームを追加した例

@keyframes my_anime {
  0% {
    background-color: #f00;    
  }
  50% {
    background-color: #0f0;
  }
  100% {
    background-color: #00f;
  }
}

以下は、クラスが「animation_test」の要素の背景色を3秒間で水色、ピンク、オレンジに変化させるアニメーションの例です。

<p class="animation_test">The First Animation Sample.</p> 

アニメーションの対象の要素(この例ではクラスが animation_test の要素)に animation プロパティを指定します。

この例では必須のキーフレーム名(my_anime01)と再生時間(デフォルトは 0s)を 3s に指定しています。

.animation_test {
  width: 300px;
  padding: 10px 20px;
  text-align: center;
  font-weight: bold;
  animation: my_anime01 3s;
}

@keyframes my_anime01 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: orange;
  }
}

The First Animation Sample.

これでページを読み込むと同時にアニメーションの再生が始まり、キーフレームで指定したように背景色が変化します。但し、この例の場合は位置がページの中ほどなので、おそらくこの位置に来るまでにアニメーションは終了しているので、アニメーションを表示させるにはページを再読み込みさせます。

アニメーション開始のタイミングは :hover などの擬似要素を利用したり、JavaScript (jQuery) を利用することができます。

animation のプロパティ

animation プロパティでアニメーションを定義する場合、以下の項目を指定することができます。

これらの項目は transition プロパティ同様、 animation プロパティでまとめて(ショートハンド)定義することも、個別に設定することも可能です。

まとめて指定する場合(ショートハンド)

指定する各項目を半角スペース区切りで指定します。

animation: キーフレーム名 アニメーションにかかる時間 イージング 遅延時間 繰り返し回数 再生方向;

animation:sample_anime 0.3s ease-in-out 3s infinite alternate both;

個別に指定する場合

各項目の値を指定します。以下は指定例です。

animation-name: sample_anime;                  
animation-duration: 0.3s; 
animation-timing-function: ease-in-out;  
animation-delay: 3s;           
animation-iteration-count:infinite;    
animation-direction: alternate;  
animation-fill-mode: both;
animation プロパティ
指定する項目 意味と使用例 デフォルト値
animation-name アニメーション名(キーフレーム名)
アニメーションのキーフレームを示す @keyframes の名前を指定
animation-name: sample_anime;
なし
*必須
animation-duration 1 回のアニメーションサイクルを行う時間の長さ
この値は、秒 (単位 “s” で指定) またはミリ秒 (単位 “ms” で指定) で指定することができる。単位を指定しない場合は、秒で指定したものとみなされます。
注: 負の値は 0 として扱われます。
animation-duration: 120ms;
0s
animation-timing-function アニメーションの速度変化(イージング : タイミング関数)
キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。一方、キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。(transition/transition-timing-function で指定する値参照
animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
ease
animation-delay アニメーションを開始するまでの時間(遅延時間)
要素が読み込まれてからアニメーションを始めるまでの遅延時間
遅延時間に負の値を指定すると、アニメーションは直ちに開始されますが、アニメーションが途中から始まるように見えます。例えば、遅延時間に -1s を指定するとアニメーションは直ちに始まりますが、それは 1 秒経過した時点からになります。
この値は、秒 (単位 s で指定) またはミリ秒 (単位 ms で指定) で指定することができます。単位を指定しない場合は、宣言が無効になります。
animation-delay: 3s;
0s
animation-iteration-count アニメーションの繰り返し回数
無期限に繰り返すことを示す infinite を指定することもできます。
負の値は 0 として扱われます。また、アニメーションの周期の一部を実行するために、整数以外の値を指定することも可能です。例えば 0.5 を指定すると、アニメーションの周期の半分を実行します。
animation-iteration-count: 2.5
1
animation-direction アニメーションの繰り返し方法(再生方向)
アニメーションするたびに、逆方向のアニメーションを行ってからアニメーションを繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定します。
normal
順方向のアニメーションのみを毎回実行。アニメーションのサイクルごとに、初期状態にリセットされてからアニメーションが再び始まります。
alternate
繰り返しの際、偶数回は逆方向に再生。逆方向のアニメーションを行うときは、初期状態に戻るようなアニメーションになります。また、timing-functions の値も逆になります。例えば ease-in のアニメーションは、逆方向のアニメーションでは ease-out のアニメーションに置き換えられます。
reverse
アニメーションを毎回逆方向に実行。アニメーションのサイクルごとに、最終状態にリセットされてからからアニメーションが再び始まります。
alternate-reverse
alternateとは逆になります。奇数回を逆方向、偶数回を正方向に再生します。
animation-direction: alternate;
normal
animation-fill-mode アニメーションの実行前後に、指定したスタイルを適用するかを設定します。
none
要素の元のスタイルのまま(アニメーションで指定されたスタイルは、アニメーションの実行前や実行後には適用されない)
forwards
再生後、要素のスタイルは最後のキーフレームの状態のままになります。
backwards
再生前、要素のスタイルは最初のキーフレームの状態になります。
both
再生前、要素のスタイルは最初のキーフレームの状態になり、再生後、要素のスタイルは最後のキーフレームの状態のままになります。
animation-fill-mode: both;
none
animation-play-state アニメーションが実行中か、一時停止されているかを判定します。このプロパティの値を取得することで、アニメーションが実行中か否かを調べることができるます。また、このプロパティの値を設定することで、アニメーションを一時停止させたり、再開させたりすることができます。
一時停止されたアニメーションを再開すると、アニメーションは最初から始まるのではなく、一時停止された時点から始まります。
running
アニメーションは実行中。
paused
アニメーションは一時停止している。
animation-play-state: paused;
running

参考サイト

アニメーション開始のきっかけ

設定したアニメーションは、ページが読み込まれると同時に再生が開始されますが、:hover や JavaScript (jQuery) を使って開始するタイミングを制御することができます。

:hover で開始

カーソルに重ねたときに再生するには、animation の設定を :hover に指定します。

<p class="animation_01">My Animation Sample.</p>
.animation_01 {
  width: 300px;
  padding: 10px 20px;
  text-align: center;
  font-weight: bold;
  border:1px solid #999;
}
.animation_01:hover {
  animation: sample_anime01 3s;
}

@keyframes sample_anime01 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: orange;
  }
}

My Animation Sample (:hover)

カーソルを外すと瞬時に背景色は animation プロパティを適用していない設定の色に戻ります。transition のように自動で逆のアニメーションで元に戻ることはありません。

そのため、この例はあまりスムーズではありませんが、「アニメーションの再生・一時停止」の animation-play-state プロパティを利用することでスムーズなアニメーションを実現できます。

animation-play-state(アニメーションの再生・一時停止)

animation-play-state プロパティでは、アニメーションの再生と一時停止を指定することができます。

例えば、animation-play-state を「paused」に指定して一時停止させておき、その要素の「:hover」に「running」と指定することでカーソルを重ねるとアニメーションが再生するようにすることが可能です。

一時停止されたアニメーションを再開すると、アニメーションは最初から始まるのではなく、一時停止された時点から始まります。

<p class="animation_02">My Animation Sample :hover</p>

また、この例ではアニメーションの繰り返し回数(animation-iteration-count)を「infinite」に指定しています。

.animation_02 {
  width: 300px;
  padding: 10px 20px;
  text-align: center;
  font-weight: bold;
  border:1px solid #999;
  animation: sample_anime02 3s infinite paused;

}
.animation_02:hover {
  animation-play-state: running;
}

@keyframes sample_anime02 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
    color: #FFF;
  }
  100% {
    background-color: orange;
  }
}

My Animation Sample :hover

クリックで開始(jQuery)

クリックでアニメーションを開始させるには、jQuery を利用します。

以下は HTML と CSS の記述です。

<p class="animation_03">My Animation Sample (Click)</p> 

アニメーションプロパティを記述したクラスを用意し、jQuery でクリックした際にこのクラスを付け、アニメーションが終了したタイミングでこのクラスを外します。

.animation_03 {
  width: 300px;
  padding: 10px 20px;
  text-align: center;
  font-weight: bold;
  border:1px solid #999;

}
.start_anime01 {
  animation: sample_anime03 3s;
}

@keyframes sample_anime03 {
  0% {
    background-color: skyblue;
    box-shadow: 0px 0px 15px #3741F7;
  }
  50% {
    background-color: pink;
    color: #FFF;
  }
  100% {
    background-color: orange;
  }
}

.on() を使うと、複数のイベントを設定することができ、イベントごとに異なる処理を記述することができます。

クリックイベントにアニメーションプロパティを記述したクラスを付加し、アニメーション終了イベント(animationend)でクラスを削除します。

 $(".animation_03").on({
    "click":function(){
      $(this).addClass("start_anime01");
    },
    "animationend":function(){
      $(this).removeClass("start_anime01");
    }
  });

My Animation Sample (Click)

transition の場合は、以下のように toggleClass() を使ってクラスを付けたり外したりしましたが、animation の場合、この方法だと偶数回目にクリックした際にはクラスが外されるだけで、アニメーションは開始されません。

$('.animation_03').click(function(){
  $(this).toggleClass('start_anime01');  
  //偶数回目のクリックでは、アニメーションが開始されない
});
スクロールで開始(jQuery)

ユーザーがスクロールして対象の要素が表示されたらアニメーションを開始するには、jQuery を利用します。

以下は HTML と CSS の記述です。

<p class="animation_04">My Animation Sample (Scroll)</p> 

アニメーションプロパティを記述したクラスを用意し、jQuery で要素が画面上に表示された際にこのクラスを付けます。

.animation_04 {
  width: 300px;
  padding: 10px 20px;
  text-align: center;
  font-weight: bold;
  border:1px solid #999;
}
.start_anime02 {
  animation: sample_anime04 3s;
}

@keyframes sample_anime04 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
    color: #FFF;
  }
  100% {
    background-color: orange;
    box-shadow: 20px 10px 10px #8D9EB8;
  }
}

ブラウザをスクロールした際のスクロールイベントは、以下のようにセレクタには window を指定します。

$(window).scroll(function() {
  セレクタで指定した要素をスクロールした時に実行する処理
});
  • windowH = $(window).height():ウィンドウの高さ
  • scrollY = $(window).scrollTop():ウィンドウ最上部のスクロール位置(量)を取得。
  • elPosition = $(selector).offset().top:要素の垂直方向の位置。
  • scrollY > elPosition - windowH :「要素が画面上に表示されたら」。

要素の位置からウィンドウの高さを引くと、要素がウィンドウの最下部に出現した際の位置を取得できます。この値が取得したスクロール位置(量)より大きければ、要素が画面上に表示されます。

$(window).scroll(function() {
  var windowH = $(window).height(),
  scrollY = $(window).scrollTop(),
  elPosition = $('.animation_04').offset().top;
  if (scrollY > elPosition - windowH) {
    $('.animation_04').addClass("start_anime02");
  }
});

同じクラスを持つ要素が複数ある場合は、以下のように each() を使います。

$(window).scroll(function() {
  var windowH = $(window).height(),
  scrollY = $(window).scrollTop();
  $('.animation_04').each(function() {
    var elPosition = $(this).offset().top;
    if (scrollY > elPosition - windowH) {
      $(this).addClass("start_anime02");
    }
  });
});

My Animation Sample (Scroll)

もし画面上に表示される度に、アニメーションを実行するには以下のように画面から外れたらクラスを削除するようにします。

$(window).scroll(function() {
  var windowH = $(window).height(),
  scrollY = $(window).scrollTop();
  $('.animation_05').each(function() {
    var elPosition = $(this).offset().top;
    if (scrollY > elPosition - windowH) {
      $(this).addClass("start_anime03");
    }else{
      $(this).removeClass("start_anime03");
    }
  });
});

My Animation Sample (Scroll)

ホバーで開始(jQuery)

以下は、jQuery を使ってカーソルに重ねたときにアニメーションを再生する例です。「animation-play-state」に関しては「:hover で開始」を参照ください。

<p class="animation_06">My Animation Sample (hover)</p> 
.animation_06 {
  width: 300px;
  padding: 10px 20px;
  text-align: center;
  font-weight: bold;
  border:1px solid #999;
  animation: sample_anime06 3s infinite paused;
}
.start_anime04 {
  animation-play-state: running;
}

@keyframes sample_anime06 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
    color: #FFF;
  }
  100% {
    background-color: orange;
    box-shadow: 20px 10px 10px #8D9EB8;
  }
}
$(".animation_06").hover(function() {
  $(this).addClass("start_anime04");
},
function() {
  $(this).removeClass("start_anime04");
});

My Animation Sample (hover)

複数のキーフレームの適用

animation プロパティには複数のキーフレームの設定をカンマで区切って指定することができます。

<p class="animation_07">animation_07</p> 

以下は、2つのキーフレームを設定しています。また、「animation-fill-mode」を「forwards」と指定して、再生後の表示をアニメーションの終点の表示に置き換えています。この指定をしない場合は、要素の元のスタイルで表示されます。(この例の場合は、元のスタイルに margin-left: -300px; と opacity: 0; が設定されているので元のスタイルに戻すと何も表示されません)

.animation_07 {
  width: 120px;
  height: 120px;
  margin-left: -300px;
  opacity: 0;
  text-align: center;
  line-height: 120px;
  border:1px solid #CB5759;
  color: #9A3A3C;
  background-color: #F4B6B7;
  animation:sample_anime07_1 3s, sample_anime07_2 3s;
  animation-fill-mode: forwards;
}

@keyframes sample_anime07_1 {
  0% {
  }
  40% {
    margin-left: 300px;
    opacity: 0.5;
  }
  50% {
    transform: rotate(1080deg); 
  }
  75% {
    background-color: #B2F0F8;
    border-color: #558EAA;
  }
  100% {
    margin-left: 20px;
    opacity: 1.0;
    background-color: #BBF8D1;
    border-color: #609650;
  }
}

@keyframes sample_anime07_2 {
  0% {
    color: #9A3A3C;
  }
  70% {
    border-radius: 10px;
  }
  100% {
    color: #437B29;
    border-radius: 60px;
    border-width: 3px;
  }
}

以下のアニメーションを表示するには、ページを再読み込みしてください。

animation_07

Animate.css

「Animate.css」は要素にクラス名をつけるだけで、簡単にいろいろなアニメーションを実装してくれる CSS ライブラリです。

animate.css サイト

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

GitHub:https://github.com/daneden/animate.css

どのようなアニメーションがあるかは「公式サイト」のプルダウンメニューからアニメーション名を選択すると、そのアニメーションが実行されます。また、「GitHub」の「Download ZIP」をクリックすると「animate.css」、「animate.min.css」などをダウンロードできます。

基本的な使い方

ヘッド内で「animate.min.css」または「animate.css」を読み込みます。

<head>
<link rel="stylesheet" href="animate.min.css">   
</head> 

アニメーションを設定する要素に使用したいアニメーションのクラス名と「animated」というクラス名を追加するだけで、ページが読み込まれるとアニメーションが実行されます。

以下は、animate01 というクラスが付与された div 要素に「animated」「bounce(アニメーションの種類)」というクラスを追加してアニメーションを行う例です。

<div class="animate01 animated bounce">bounce</div>
.animate01 {
  /*これらの CSS は単に div 要素のスタイルです*/
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #F7C5C6;
  color: #F76265;
  border: 1px solid #B9696B;
}

ページを再読み込みするとアニメーションが表示されます。

bounce

以下のプロパティを対象の要素に追加することで、これらの設定を変更することができます。

  • animation-duration: アニメーションにかかる時間
  • animation-delay:アニメーションを開始するまでの時間(遅延時間)
  • animation-iteration-count:アニメーションの繰り返し回数
.animate02 {
  margin: 40px 0;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #C5E4F5;
  color: #30A6F1;
  border: 1px solid #779DC0;
  /*アニメーションの設定の追加(上書き)*/
  animation-duration: 0.7s;
  animation-delay: 1s;
  animation-iteration-count: 3; 
}
flip

この例ではベンダープレフィックスを付けていませんが、必要に応じて付けてください。2016年5月の時点では、最新のブラウザのほとんどは keyframe をサポートしていますが、少し前の iOS (8.x) などに対応するには、-webkit- のベンダープレフィックスを付ける必要があります。

Can I Use: keyframe

以下は、-webkit- のベンダープレフィックスを追加した例です。注意点としては、ベンダープレフィックスの付いたプロパティを先に記述する必要があります。

.animate02 {
  margin: 40px 0;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #C5E4F5;
  color: #30A6F1;
  border: 1px solid #779DC0;
  /*アニメーションの設定の追加(上書き)*/
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3; 
}

ループ

アニメーションを繰り返し実行(ループ)させるには、対象の要素の CSS に「animation-iteration-count:infinite;」を指定するか、クラス「infinite」を指定します。

以下は、Font Awesome のアイコンフォントにクラス「animated pulse infinite」を追加して「pulse」のアニメーションを繰り返し実行させる例です。

クラス「fa fa-heart」や、「aria-hidden="true"」はアイコンフォントのためのもので、アニメーションには関係ありません。

<i class="fa fa-heart animated pulse infinite" aria-hidden="true"></i>

クリックでアニメーション

以下は、jQuery を使って要素をクリックした場合にアニメーションさせる方法です。

アニメーションさせる要素の HTML の例です。クラスにアニメーションのクラス名や「animated」というクラスを付ける必要はありません。(jQuery で付け外しをします)

<div class="animate04">Click</div>  

以下はこの例の CSS です。これらもアニメーションには関係はありません。(単に要素のスタイルを指定しているだけです)

.animate04 {
  margin: 40px 0;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 20px;
  background-color: #BEF7DD;
  color: #187B3C;
  border: 1px solid #187B3C;
  cursor: pointer;
}

jQuery では.on() .one() を使って「click」イベントと「animationend」イベント(アニメーション終了時に発生するイベント)を設定します。

以下の例では、webkit のアニメーション終了時に発生するイベント(webkitAnimationEnd)も加えています。GitHub ページには他のアニメーション終了時に発生するイベントも記載されています。必要に応じて加えてください。

アニメーション終了時に追加したクラス(この例では、animated shake)を削除しないと、最初のクリックの際にしかアニメーションが行われません。

jQuery(function($){
  $('.animate04').on('click',function() {
    $(this).addClass('animated shake').one('webkitAnimationEnd animationend',
      function() {
        $(this).removeClass('animated shake');
      });
  });
});
Click

複数のアニメーションを実装する場合は、以下のように関数にしておくと便利かと思います。

function myClickAnimation(elem,animationName) {
  $(elem).on('click',function() {
    $(this).addClass('animated ' + animationName).one('webkitAnimationEnd animationend',
      function() {
        $(this).removeClass('animated ' + animationName);
      })
  }) 
}

myClickAnimation('.animate04', 'shake');

ホバーでアニメーション

以下はホバー時にアニメーションさせる例です。

<div class="animate05">Hover</div>

この例では、単純にマウスが重なった際に、アニメーションのクラスを追加し、マウスが外れたらアニメーションのクラスを削除しています。

$('.animate05').hover(function() {
  $(this).addClass('animated rubberBand');
},
function() {
  $(this).removeClass('animated rubberBand');
});
Hover

この方法だとマウスが外れるとすぐにアニメーションが止まってしまうため、あまりスムーズではありません。

以下のようにすることで、アニメーションが最後まで実施されるようになります。hover の代わりに、mouseover イベントを利用しています。但し、アニメーションに要する時間より早い時点でホバーするとアニメーションが行われません。

var animationEnd = "webkitAnimationEnd animationend";
$(".animate06").on({   
  "mouseover":function(){
    $(this).addClass("animated rubberBand").one(animationEnd,
      function() {
        $(this).removeClass('animated rubberBand');
      });
  }
});
Hover

以下のように関数にしておくと便利かも知れません。

var animationEnd = "webkitAnimationEnd animationend";
function myHoverAnimation(elem,animationName) {
  $(elem).on({   
    "mouseover":function(){
      $(this).addClass('animated ' + animationName).one(animationEnd,
        function() {
          $(this).removeClass('animated ' + animationName);
        });
    }
  });  
}
myHoverAnimation('.animate06', 'rubberBand');

スクロールでアニメーション

以下はユーザーがスクロールして対象の要素が表示されたらアニメーションを開始する例です。

参考:「スクロールで開始

<div class="animate07">bounceInLeft</div>

jQuery で要素が画面上に表示された際に「animated」とアニメーションのクラス名(この例では bounceInLeft)を追加します。

$(window).scroll(function() {
  var windowH = $(window).height(),
  scrollY = $(window).scrollTop();
  $('.animate07').each(function() {
    var elPosition = $(this).offset().top;
    if (scrollY > elPosition - windowH) {
      $(this).addClass("animated bounceInLeft");
    }
  });
});
bounceInLeft

カスタマイズ

animate.css を編集することで、アニメーションをカスタマイズすることもできます。以下は「pulse」の変化をもう少し大きくした例です。

クラス「fa fa-heart」や、「aria-hidden="true"」はアイコンフォントのためのもので、アニメーションには関係ありません。

<i class="fa fa-heart animated pulse2 infinite" aria-hidden="true"></i> 

オリジナルの scale3d(1.05, 1.05, 1.05) を scale3d(1.3, 1.3, 1.3) に書き換えただけです。

/* オリジナルの pulse */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

/* カスタマイズ  pulse を元に pulse2 を作成する例 */

@-webkit-keyframes pulse2 {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.3, 1.3, 1.3);
    transform: scale3d(1.3, 1.3, 1.3);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse2 {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.3, 1.3, 1.3);
    transform: scale3d(1.3, 1.3, 1.3);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse2 {
  -webkit-animation-name: pulse2;
  animation-name: pulse2;
}

マウスオーバー時のエフェクト

CSS を使ったマウスオーバー時のエフェクトのサンプルです。

Sample 1

Caption Title

text text text

HTML

<div class="as_01">
  <img src="images/sample01.jpg" alt="" class="transform01">
  <div class="caption">
    <h3><a href="#">Caption Title</a></h3>
    <p>text text text</p>
  </div>
</div>

この例では transition を使って2つのアニメーションを行っています。以下が CSS です。

.as_01 {
  position: relative;
  overflow: hidden;
  width: 300px;
}
.caption {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
  color: #DDD;
  text-align: center;
}
.as_01:hover .caption {
  top: 0;
  left: 0;
}
.transform01 {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.as_01:hover .transform01 {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

参考サイト:CSSのみで実装するキャプションエフェクト 20 (NxWorld)

レスポンシブ

以下は、画面幅に応じて画像のサイズを伸縮する場合の例です。

固定幅の場合と異なり、マウスオーバー時に表示するコンテンツも画面幅に応じてフォントサイズや表示位置を調整する必要が出てきます。また、場合によってはマウスオーバー時に表示するコンテンツの一部を非表示にしたり、スクロールバーを表示させるようにする必要があるかも知れません。

以下の例では、マウスオーバー時に表示するコンテンツの一部を非表示にしています。(アニメーションの効果は前述の例と同じです)

<div class="as_02"> <img src="images/bg1.jpg" alt="" class="transform02">
  <div class="caption">
    <h2>H2 Title (Responsive sample)</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p class="hide">Qui atque nemo odit, obcaecati quaerat aliq...</p>
    <p><a class="contact" href="#">Contact</a></p>
  </div>
</div>  

固定幅の場合は、表示領域(.as_02)の幅を固定にしていましたが、レスポンシブ対応にするには、幅を width:100% として、最大幅(max-width)及び最小幅(min-widt)を指定しています。画像(img 要素)に対しても width: 100% を指定しています。

また、画面幅が狭い場合に非表示にする要素に、クラス「.hide」を指定してあり、その要素を画面幅が狭い時は display: none を指定しています。

フォントサイズや表示位置は、メディアクエリを使って画面幅に合わせて調整しています。

width と max-width の記述順:表示領域(.as_02)に指定している width と max-width の順序を逆にして max-width を先に記述すると、レイアウトが崩れるブラウザが一部ありました。(全体のレイアウトの設定との関係や画像の実際のサイズの影響?かもしれません。)

.as_02 {
  position: relative;
  overflow: hidden;
  width: 100%; /* 幅を100%に指定 */
  max-width: 480px;
  min-width: 240px;
  margin: auto; /* 中央寄せ(レスポンシブとは無関係) */
}
.as_02 img {
  width: 100%; /* 幅を100%に指定 */
  border: 5px solid rgba(197,126,13,1.00);
}
.caption {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
  color: #FFF;
  text-align: center;
}
.caption h2 {
  margin-top: 4%; /* 位置を画面幅に応じて調整 */
  font-size: 16px; /* フォントサイズを画面幅に応じて調整 */
  color: #FFF;
}
.as_02:hover .caption {
  top: 0;
  left: 0;
}
.transform02 {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.as_02:hover .transform02 {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
.as_02 p {
  margin: 5px auto;
  padding: 0 10px;
}
a.contact {
  color:#B0EDF8;
}
.hide {
  display: none; /* 小画面では非表示 */
}

@media screen and (min-width : 460px) {
  .caption h2 {
    margin-top: 9%; /* 位置を画面幅に応じて調整 */
    font-size: 20px; /* フォントサイズを画面幅に応じて調整 */
    color: #FFF;
  }
  .hide {
    display: block; /* 中画面以上では表示 */
  }
}

@media screen and (min-width : 640px) {
  .as_02 p {
    margin: 10px auto;
  }
  .caption h2 {
    margin-top: 12%; /* 位置を画面幅に応じて調整 */
    font-size: 24px; /* フォントサイズを画面幅に応じて調整 */
  }
}

サンプル

以下は、画面幅が狭い場合はスクロールバーを表示して全てのコンテンツを表示する例です。HTML の構成の前述の例との違いは以下になります。

  • 前述の例でマウスオーバー時に非表示にする要素に指定したクラス(.hide)を削除
  • 表示領域のクラス名を「.as_03」に
  • h2 要素が、小画面で見栄え良く改行するように<br class="hide_br">を追加
<div class="as_03"> <img src="images/bg1.jpg" alt="" class="transform02">
  <div class="caption">
    <h2>H2 Title <br class="hide_br">(Responsive sample)</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Qui atque nemo odit, obcaecati quaerat aliquid voluptatu...</p>
    <p><a class="contact" href="#">Contact</a></p>
  </div>
</div>

CSS での前述の例との違いは、小画面ではマウスオーバー時に表示する領域(.caption)に overflow: scroll を指定して、スクロールバーを表示して全体を表示するようにして、中画面以上では、overflow: hidden を指定してスクロールバーを表示しないようにしています。

また、小画面では、h2 要素が意図した位置で改行されるように、.hide_br に display: block を指定し、中画面以上では改行が不要なので、.hide_br に display: none を指定しています。

.as_03 {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  min-width: 240px;
  margin: auto;
}
.as_03 img {
  width: 100%;
  border: 5px solid rgba(197,126,13,1.00);
}
.caption {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
  color: #FFF;
  text-align: center;
  overflow: scroll; /* スクロールバーを表示 */
}
.caption h2 {
  margin-top: 4%;
  font-size: 16px;
  color: #FFF;
}
.as_03:hover .caption {
  top: 0;
  left: 0;
}
.transform02 {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.as_03:hover .transform02 {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
.as_03 p {
  margin: 5px auto;
  padding: 0 10px;
}
a.contact {
  color:#B0EDF8;
}
.hide_br {
  display: block; /* br 要素を表示 */
} 
@media screen and (min-width : 460px) {
  .caption {
    overflow: hidden; /* スクロールバーを非表示に */
  }
  .caption h2 {
    margin-top: 9%;
    font-size: 20px;
    color: #FFF;
  }
}

@media screen and (min-width : 640px) {
  .as_03 p {
    margin: 10px auto;
  }
  .caption h2 {
    margin-top: 12%;
    font-size: 24px;
  }
  .hide_br {
    display: none; /* br 要素を非表示に */
  }
}

サンプル

Sample 2

Hover Style #2

Some description

Read More
<div class="view">
  <img src="../images/sample01.jpg" alt="">
  <div class="mask"></div>
  <div class="content">
    <h2>Hover Style #2</h2>
    <p>Some description</p>
    <a href="#" class="info">Read More</a>
  </div>
</div>
.view {
  width: 300px;
  height: 200px;
  margin: 10px;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.view .mask, .view .content {
  width: 300px;
  height: 200px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}
.view h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  margin: 20px 40px 0px 40px;
  transform: translate(200px, -200px);
  transition: all 0.2s ease-in-out;
}
.view p {
  font-size: 12px;
  position: relative;
  color: #fff;
  padding: 10px 20px 20px;
  text-align: center;
  transform: translate(-200px, 200px);
  transition: all 0.2s ease-in-out;
}
.view a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000;
  border-radius:4px;
  transform: translate(0px, 100px);
  transition: transform 0.2s 0.1s ease-in-out;
}
.view a.info:hover {
  box-shadow: 0 0 5px #A0F3F4;
}
.view .mask { 
  background-color: rgba(0,0,0, 0.4); 
  width: 450px;
  height: 450px;
  opacity: 0;
  transform: translate(265px, 145px) rotate(45deg);
  transition: all 0.2s ease-in-out;
} 

.view:hover .mask { 
  opacity:1; 
  transform: translate(-80px, -125px) rotate(45deg);
}							  
.view:hover h2 { 
  transform: translate(0px,0px);
  transition-delay: 0.3s; 
}
.view:hover p { 
  transform: translate(0px,0px); 
  transition-delay: 0.4s;
}
.view:hover a.info { 
  transform: translate(0px,0px); 
  transition-delay: 0.5s;
}

参考サイト:Original Hover Effects with CSS3

Sample 3

<div class="view2 effect">  
  <img src="../images/sample01.jpg" alt="">
  <div class="mask">  
    <a href="#" class="info" title="Full Image">Full Image</a>  
  </div>  
</div>
.view2 {
   width: 300px;
   height: 200px;
   margin: 10px;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}

.view2 .mask, .view2 .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view2 img {
   display: block;
   position: relative;
}

.view2 a.info {
   background:url(../images/magnifying_glass.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:30px;
   height:30px;
}

.view2 a.info:hover {
  -webkit-filter: drop-shadow(0px 0px 3px #A0F3F4);
  filter: drop-shadow(0px 0px 3px #A0F3F4);
}

.effect .mask {
   opacity: 0;
   overflow:visible;
   border:0px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}

.effect a.info {
   position:relative;
   top:-10px;
   opacity:0;
   transform:scale(0,0);
   transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}

.effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.6);
}

.effect:hover a.info {
   opacity:1;
   transform:scale(1,1);
   transition-delay:0.3s;
}

参考サイト:CSS3 Hover Effects

以下のサイトにもいろいろなサンプルが掲載されています。