CSS3 アニメーション

作成日：2018年1月20日

関連ページ：

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でアニメーションを定義する場合、以下の４つのプロパティを指定することができます。

  • 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

以下は cubic-bezier 関数を使ったイージングの例です。

イージング cubic-bezier 関数
easeInSine cubic-bezier(0.47, 0, 0.745, 0.715);
easeOutSine cubic-bezier(0.39, 0.575, 0.565, 1);
easeInOutSine cubic-bezier(0.445, 0.05, 0.55, 0.95);
easeInQuad cubic-bezier(0.55, 0.085, 0.68, 0.53);
easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94);
easeInOutQuad cubic-bezier(0.455, 0.03, 0.515, 0.955);
easeInCubic cubic-bezier(0.55, 0.055, 0.675, 0.19);
easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1);
easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1);
easeInQuart cubic-bezier(0.895, 0.03, 0.685, 0.22);
easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1);
easeInOutQuart cubic-bezier(0.77, 0, 0.175, 1);
easeInQuint cubic-bezier(0.755, 0.05, 0.855, 0.06);
easeOutQuint cubic-bezier(0.23, 1, 0.32, 1);
easeInOutQuint cubic-bezier(0.86, 0, 0.07, 1);
easeInExpo cubic-bezier(0.95, 0.05, 0.795, 0.035);
easeOutExpo cubic-bezier(0.19, 1, 0.22, 1);
easeInOutExpo cubic-bezier(1, 0, 0, 1);
easeInCirc cubic-bezier(0.6, 0.04, 0.98, 0.335);
easeOutCirc cubic-bezier(0.075, 0.82, 0.165, 1);
easeInOutCirc cubic-bezier(0.785, 0.135, 0.15, 0.86);
easeInBack cubic-bezier(0.6, -0.28, 0.735, 0.045);
easeOutBack cubic-bezier(0.175, 0.885, 0.32, 1.275);
easeInOutBack cubic-bezier(0.68, -0.55, 0.265, 1.55);

参考：https://cubic-bezier.com/

: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">
  <span class="sample10"></span>
</label>

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

.sample10 {
  display: block;
  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;
}

label 要素の中に div 要素などのブロック要素を配置すると W3C の Validator のチェックでは「Error: Element div not allowed as child of element label in this context.」のようなエラーになります（機能はします）。そのため、この例では span 要素を使い、CSS で display: block を指定しています。

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");
  });

関連ページ：CSS 擬似要素 ::before ::after

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) を使って開始するタイミングを制御することができます。

Web Animation API を使用すれば、CSS で設定したアニメーションを取得して制御することができます。

関連項目：CSS アニメーションの取得

: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 / JS）

クリックでアニメーションを開始させるには、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');
  //偶数回目のクリックでは、アニメーションが開始されない
});
JavaScript の例

以下は JavaScript の場合の例です。jQuery 同様、アニメーションが終了した時点で発火されるイベント（animationend）を使ってクラスを削除します（この処理を記述しないと、最初のクリックの時にしかアニメーションは実行されません）。

document.querySelector('.animation_03').addEventListener('click',(e) => {
  const target = e.currentTarget;
  target.classList.add('start_anime01');
  //animationend イベント
  target.addEventListener('animationend', () => {
    // アニメーション終了後にクラスを削除
    target.classList.remove('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>

以下は、２つのキーフレームを設定しています。また、「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 を使って２つのアニメーションを行っています。以下が 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 0;
  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

Full Image 
<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

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

スマホなどでのホバー効果

スマホなどのタッチデバイスでマウスオーバー（ホバー）時の動作を対応させるには、例えば body 要素に ontouchstart 属性（値は空 ""）を追加します。

<body ontouchstart=""><!-- ontouchstart 属性を追加 -->

※ 但し、DOM 要素に ontouchstart 属性を記述すると Markup Validation Service でチェックすると「Error: Attribute ontouchstart not allowed on element body at this point.」のようなエラーになるので、気になる場合は JavaScript で追加します。

関連ページ：スマホで hover 対応 ontouchstart タッチデバイス 判定

SVG アイコンを表示

画像にマウスオーバーすると SVG のアイコンを表示する例です。

この例では ::after 疑似要素の content プロパティを使って SVG のアイコンを表示します。また、アイコンは Bootstrap Icons を使っていますが、svg のコードがあれば何でも使うことができます。

以下は背景が黒色の丸の中に＋印の SVG アイコン（Plus circle fill）です。

HTML（Bootstrap Icons からコピー） 
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
</svg>

色は fill 属性、サイズは width と height 属性で変更できます（以下は fill を orange に、width と height を 24 に変更）。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="orange" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
</svg>

サイズは svg 要素の width と height 属性を削除して、親要素にサイズを指定することもできます。親要素にサイズを指定する際は、width を指定すれば viewBox で指定された比率で表示されます。

<div style="width: 28px;">
  <svg xmlns="http://www.w3.org/2000/svg" fill="#38A4EE" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
  </svg>
</div>

以下は span 要素に CSS で ::after 疑似要素を設定してアイコンを表示する例です。

HTML 
<span class="icon-plus-circle"></span>
CSS 
.icon-plus-circle::after{
  display: inline-block;
  margin: 0;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-circle-fill' viewBox='0 0 16 16'%3E  %3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/%3E%3C/svg%3E");
}

CSS では ::after の content プロパティに svg のマークアップを % エンコード（<、>、# 文字をそれぞれ %3C、%3E、%23 に、ダブルクオートはシングルクォートに変換し、改行は削除）して指定します。

CSS 
.icon-plus-circle::after{
  display: inline-block;
  margin: 0;
  content: url("data:image/svg+xml, svg のマークアップを URI エンコードした文字列");
}

svg のマークアップを手動で URI エンコードするのは面倒な場合は「SVG エスケープツール」で変換することができます。

関連ページ：CSS で svg 要素を表示

以下は、画像（正確にはその親要素）にマウスオーバーすると画像を拡大表示し、SVG アイコンを表示する例です。

sample image
HTML 
<div class="icon_sample">
  <img src="../images/sample01.jpg" alt="sample image">
  <span class="icon-plus-circle-white"></span>
</div>

SVG アイコンは content プロパティに指定した svg のマークアップから width と height を削除して、疑似要素に width を指定しています。また、色を白に変更しています。

また、アイコンはホバー時に表示する際に中央に配置するため、絶対配置にして24〜27行目の設定を指定しています（参考：レベル3で縦横に中央寄せする）。

.icon_sample {
  max-width: 240px;
  /*アイコンの基準とするため relative を指定*/
  position: relative;
  /*ホバー時に画像を拡大表示する際にはみ出さないように*/
  overflow: hidden;
  /*ホバー時に画像を半透明にして暗くする*/
  background-color: #000;
}
/* SVG アイコン */
.icon-plus-circle-white::after{
  display: inline-block;
  margin: 0;
  width: 24px;
  /*fill 属性を currentColor から白に変更（# は %23 に変換）*/
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' class='bi bi-plus-circle-fill' viewBox='0 0 16 16'%3E  %3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/%3E%3C/svg%3E");
}
.icon_sample .icon-plus-circle-white {
  opacity: 0;
  /* 絶対配置 */
  position: absolute;
  pointer-events: none;
  /* トランジションで opacity を使って表示 */
  transition: opacity 0.3s;
  /* 以下は水平及び垂直方向に中央配置するための設定 */
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
/*親要素にホバー時に opacity を 1 にして表示*/
.icon_sample:hover .icon-plus-circle-white {
  opacity: 1;
}

/*画像*/
.icon_sample img {
  max-width: 100%;
  /*ホバー時のアニメーション（拡大と半透明）*/
  transition: transform 0.3s, opacity 0.3s;
}
.icon_sample:hover img{
  /*ホバー時に拡大表示*/
  transform: scale(1.2);
  /*ホバー時に半透明にして背景色の黒により暗く表示*/
  opacity: 0.7;
}

画像の背景の要素に暗い色（この例では黒）を指定し、ホバー時に画像の透明度を下げることで画像を暗く表示するようにしています。

関連ページ：アイコンをクリックして表示（Luminous Lightbox）

関連項目：背景にグラデーション

figure 要素を使った例

以下は figure 要素を使ったマウスオーバー時に img 要素を transform の scale() を使って拡大するアニメーションの例です。

※ 以降の例では figure と figcaption 要素を使用していますが、代わりに div 要素を使っても同じです。

この例の場合、img 要素の親要素である hover_effect1 クラスを指定した figure 要素に overflow: hidden を指定していますが、画像を拡大すると figcaption で設定しているキャプションが隠れてしまいます（下方向に画像が伸びてしまいます）。 

<figure class="hover_effect1">
  <img src="sample.jpg" width="600" height="800" alt="" loading="lazy">
  <figcaption>花と山</figcaption>
</figure>

loading="lazy" は画像を遅延読み込みするための属性です。

CSS 
.hover_effect1 {
  max-width: 300px;
  overflow: hidden; /*画像がホバー時にはみ出さないように*/
  margin: 0;
  padding: 0;
}
.hover_effect1 figcaption {
  text-align: center;
  padding: 10px;
}
.hover_effect1 img {
  width: 100%;
  display: block;
  transition: 0.5s;
}
.hover_effect1 img:hover {
  transform: scale(1.3) ;
}

以下の画像にマウスオーバーするとキャプションの「花と山」の文字が隠れてしまいます。

これは figure 要素に overflow: hidden を指定していますが、figcaption 要素は figure 要素の子要素なのでその部分のスペースまで画像が拡大されるためです。

花と山

ホバー時にキャプションに position: relative を指定するとキャプションを本来の位置に表示することができます。以下ではホバー時にキャプションに背景色を設定し文字色を変更しています。

CSS 
/* 以下を追加 */
.hover_effect1:hover figcaption {
  position: relative;
  color: #fff;
  background-color: rgba(0,0,0,0.5);
}

/* 以下でも同様の結果になります */
.hover_effect1x:hover figcaption {
  transform: translateY(0px);
  color: #fff;
  background-color: rgba(0,0,0,0.5);
}
花と山

または、translateY を使って画像をキャプションの高さだけ垂直方向に上に移動させてもキャプションが隠れないようにすることができます。この例の場合、キャプションの高さはパディングを含めると40pxですが、実際には46pxを指定しています。

CSS 
.hover_effect1 {
  max-width: 300px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.hover_effect1 figcaption {
  text-align: center;
  padding: 10px;
}
.hover_effect1 img {
  width: 100%;
  display: block;
  transition: 0.5s;
}
.hover_effect1 img:hover {
  transform: scale(1.3) translateY(-46px); /* translateY を追加 */
}
花と山
figcaption 要素をアニメーション

以下は figcaption 要素を非表示にしておき、画像（）にホバー時にアニメーションでキャプションを表示する例です。

HTML は前述と同じで、クラス名だけが異なっています。

<figure class="hover_effect1-2">
  <img src="sample.jpg" width="600" height="800" alt="" loading="lazy">
  <figcaption>花と山</figcaption>
</figure>

この例では figure 要素（.hover_effect1-2）に :hover を設定しています。

figcaption 要素は opacity: 0 で非表示にし、translateY で位置を 2rem だけ上に配置しておきます。

figure 要素にマウスオーバーすると画像のアニメーションとキャプションのアニメーションを実行します。

CSS 
.hover_effect1-2 {
  max-width: 300px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.hover_effect1-2 figcaption {
  text-align: center;
  padding: 10px;
  background-color: rgba(0,0,0,0.3);
  color: #fff;
  opacity: 0; /* 最初は非表示に */
  transform: translateY(-2rem); /* translateY で位置を 2rem だけ上に配置 */
  transition: 0.5s;
}
.hover_effect1-2 img {
  width: 100%;
  display: block;
  transition: 0.5s;
}

/* figure 要素（.hover_effect1-2）に :hover を設定 */
.hover_effect1-2:hover img {
  transform: scale(1.3) translateY(-46px); /* 画像のアニメーション */
}
/* キャプションのアニメーション */
.hover_effect1-2:hover figcaption {
  opacity: 1;
  position: relative;
  z-index: 1;
  transform: translateY(0);
  background-color: rgba(0,0,0,1);
}
花と山
figcaption 要素を絶対配置

垂直方向に画像がはみ出さないようにする1つの方法は figcaption 要素を絶対配置にします。

但し、その場合、figcaption 要素は figure 要素に overflow: hidden を指定してあるので、表示されなくなってしまうため、以下の例では画像の上に表示するようにしています。

HTML は前述と同じです（指定しているクラス名が異なるだけです）。

<figure class="hover_effect2">
  <img src="sample.jpg" width="600" height="800" alt="" loading="lazy">
  <figcaption>花と山</figcaption>
</figure>

figcaption を絶対配置するので、その基準となるように親要素に position: relative を指定しています。

キャプションはマウスオーバー時に表示する位置を top bottom で指定して、translateY(2rem) で下に移動して隠しておき、マウスオーバー時に translateY(0px) で元の位置に transition で戻します。

.hover_effect2 {
  max-width: 300px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative; /* 絶対配置の基準 */
}
.hover_effect2 figcaption {
  text-align: center;
  position: absolute; /* 絶対配置 */
  top: calc(100% - 2rem);  /* 垂直方向の位置（下から 2rem。bottom で指定しても良いかも） */
  bottom: 0;  /* bottom で指定 */
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  line-height: 1.8;
  color: #fff;
  transform: translateY(2rem);  /* 垂直方向に 2rem 下に移動しておく */
  transition: 0.5s;
}

.hover_effect2 img {
  width: 100%;
  display: block;
  transition: 0.5s;
}

.hover_effect2 img:hover {
  transform: scale(1.3) ;
}

.hover_effect2:hover figcaption {
  transform: translateY(0px);   /* 垂直方向の位置を元へ戻す */
}
花と山
背景にグラデーション

以下はマウスオーバー時に画像の上方向の移動と、figure 要素の背景にグラデーションを指定して画像の不透明度を下げグラデーションが適用されたように見せる例です。

HTML は前述と同じです（指定しているクラス名が異なるだけです）。

<figure class="hover_effect3">
  <img src="sample.jpg" width="600" height="800" alt="" loading="lazy">
  <figcaption>花と山</figcaption>
</figure>

img:hover で transform に scale の拡大に加えて translateY(-2rem) も指定して画像を上方向に移動するようにしています。また、opacity で不透明度を下げて背景画像が透過するようにしています。

figure 要素の背景のグラデーションは figure 要素にマウスオーバーした際に linear-gradient で設定しています。figure 要素自体に最初からグラデーションを設定すると、この例の場合、画像を translate で移動しているので、場合によっては背景のグラデーションがちらつく可能性があります（画像の読み込みに時間がかかる場合など）

.hover_effect3 {
  max-width: 300px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}
.hover_effect3 figcaption {
  text-align: center;
  position: absolute;
  top: calc(100% - 2rem); 
  bottom: 0;  /* bottom で指定 */
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  line-height: 1.8;
  color: #fff;
  transform: translateY(2rem);
  transition: 0.5s;
}

.hover_effect3 img {
  width: 100%;
  display: block;
  transition: 0.5s;
}

.hover_effect3 img:hover {
  transform: scale(1.2) translateY(-2rem);  /* translateY() を追加 */
  opacity: 0.85;  /* opacity を追加 */
}

.hover_effect3:hover figcaption {
  transform: translateY(0px);
}

.hover_effect3:hover {
  background-image: linear-gradient(red, yellow);   /* ホバー時にグラデーションを設定 */
}
花と山
背景にグラデーションパターン

background-image プロパティには、グラデーションの値をカンマで区切って複数のグラデーションを指定することができます。

以下はグラデーションパターンを使った例です。

.hover_effect3:hover {
  background-image:
    linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
    linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
    linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
    linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
  background-size:20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
花と山

以下のページには参考になるグラデーションパターンが掲載されています。

関連ページ：CSS 擬似要素 ::before ::after（オーバーレイ）

::before を使ってテキストなどを表示

以下は ::before 擬似要素を使ってマウスオーバー時にテキストなどを表示する例です。

但し、::before 擬似要素や ::after 擬似要素を使って表示する内容は HTML 文として認識されないため、主に装飾目的に使用するのが良いとされています。

HTML は基本的には前述と同じですが、img 要素にリンクを設定しています。。

<figure class="hover_effect4">
  <a href="#">
    <img src="sample.jpg" width="600" height="800" alt="" loading="lazy">
  </a>
<figcaption>花と山</figcaption>

前述の例との違いは39〜50行目の部分だけです。

content に "View \2665" を指定して「View」というテキストとユニコード文字でハートを表示するようにしています。

この場合も表示する内容を絶対配置にしないと、マウスオーバー時に背景のグラデーションがちらついてしまいます。また、z-index を指定して最前面に表示するようにしています。

.hover_effect4 {
  max-width: 300px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}
.hover_effect4 figcaption {
  text-align: center;
  position: absolute;
  top: calc(100% - 2rem); 
  bottom: 0;  /* bottom で指定 */
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  line-height: 1.8;
  color: #fff;
  transform: translateY(2rem);
  transition: 0.5s;
}

.hover_effect4 img {
  width: 100%;
  display: block;
  transition: 0.5s;
}

.hover_effect4 img:hover {
  transform: scale(1.2) translateY(-2rem);
  opacity: 0.85;
}

.hover_effect4:hover figcaption {
  transform: translateY(0px);
}

.hover_effect4:hover {
  background-image: linear-gradient(blue, green);   /* 青と緑のグラデーション */
}

.hover_effect4:hover::before {
  content:"View \2665";
  position: absolute;   /* 絶対配置に */
  top: 5%;
  left: 5%;
  color:#fff;
  background-color: rgba(0,0,0,0.4);
  border-radius: 50%;
  padding: 3px 15px;
  font-weight: 300;
  z-index: 5;  /* 全面に表示 */
}
花と山
pointer-events

画像にマウスオーバーすると拡大表示されますが、キャプションや ::before 擬似要素を使って表示している部分の上にマウスが移動すると元の大きさに戻ります。

キャプションや ::before を使って表示している部分の上にマウスが移動しても、そのまま拡大表示させておくにはそれらの要素に pointer-events プロパティを設定して none を指定します。

.hover_effect5 {
  max-width: 300px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
}
.hover_effect5 figcaption {
  text-align: center;
  position: absolute;
  top: calc(100% - 2rem); 
  bottom: 0;  /* bottom で指定 */
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  line-height: 1.8;
  color: #fff;
  transform: translateY(2rem);
  transition: 0.5s;
  pointer-events: none;   /* 追加 */
}

.hover_effect5 img {
  width: 100%;
  display: block;
  transition: 0.5s;
}

.hover_effect5 img:hover {
  transform: scale(1.2) translateY(-2rem);
  opacity: 0.85;
}

.hover_effect5:hover figcaption {
  transform: translateY(0px);
}

.hover_effect5:hover {
  background-image: linear-gradient(blue, green);
}

.hover_effect5:hover::before {
  content:"View \2665";
  position: absolute;
  top: 5%;
  left: 5%;
  color:#fff;
  background-color: rgba(0,0,0,0.4);
  border-radius: 50%;
  padding: 3px 15px;
  font-weight: 300;
  z-index: 5;
  pointer-events: none;   /* 追加 */
}
花と山