< 記事共通の特徴 >

全デモのソース一式がダウンロード可能です。
ソース一式はローカル環境ですぐに使える構成になっています。

下部固定メニューの作り方12
(格納式:右上からフェードイン)

animateを使わないスムーズモーション01
(直線出現)


CSSによるスムーズモーションの実現

Hover時

解説

用途・理由・概要

animateを使用せずに、CSSでスムーズな演出を実現する方法を記載します。
ここでは、hover時(要素の上にマウスポインタを重ねたとき)に演出を行う方法を記載します。

hover時に適用されるスタイル

hover時(要素の上にマウスポインタを重ねたとき)に、
その要素に適用されるスタイルはCSSで次のように設定できます。
.hover02:hover {
  background: #0099bb;
}
※ 対象とする id/class に :hover をつける事で、hover時に追加適用するスタイルを設定できます。

ゆっくり変化させる設定

CSS設定が変更されたときの変化を漸次的(だんだんと)にするには、
下記のようにCSS設定に transition を追加します。
.hover02 {
  -webkit-transition: all 2.0s ease;
  transition:         all 2.0s ease;
}
※ transition / -webkit-transition と同様の設定が2つあるのは、複数ブラウザ対応のためです。
※ transition / -webkit-transition の一方の設定は各ブラウザで無視されます。

まとめ

上記ポイントをまとめると、下記のようなコードになります。
<!DOCTYPE html>
<head>
  <title>CSSによるスムーズモーションの実現(Hover時)</title>

<style>
  .hover02 {
    -webkit-transition: all 2.0s ease;
    transition:         all 2.0s ease;
  } 
  .hover02:hover {
    background: #0099bb;
  }
</style>
</head>
<body>
  <div class="hover02">Hoverすると、背景色がゆっくり変化します。</div>
</body>
</html>

クラスの追加・削除

解説

用途・理由・概要

animateを使用せずに、CSSでスムーズな演出を実現する方法を記載します。
ここでは、hover時以外に演出を行う方法を記載します。

クラスの追加・削除

hover時は自動で :hover のスタイルが適用されることで、スタイルが変化しましたが、
任意のタイミングで演出を行う場合は、Javascriptで class を追加・削除することにより
スタイルを変化させます。

クラスの追加は次のようなコードになります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
  $('.block_design').addClass('ready');
</script>
※ block_design クラスを含む要素に ready クラスを追加しています。

クラスの削除は次のようなコードになります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
  $('.block_design').removeClass('ready');
</script>
※ block_design クラスを含む要素から ready クラスを削除しています。

ゆっくり変化させる設定

ready クラスの追加・削除によりスタイルを変化させる場合、次のようにスタイルを設定します。
.block_design {
  background: #00ffcc;
  -webkit-transition: all 2.0s ease;
  transition:         all 2.0s ease;
}
.block_design.ready {
  background: #cccccc;
}
※ transition / -webkit-transition と同様の設定が2つあるのは、複数ブラウザ対応のためです。
※ transition / -webkit-transition の一方の設定は各ブラウザで無視されます。

まとめ

上記ポイントをまとめると、下記のようなコードになります。
<!DOCTYPE html>
<head>
  <title>CSSによるスムーズモーションの実現(クラスの追加・削除)</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
  .block_design {
    background: #00ffcc;
    -webkit-transition: all 2.0s ease;
    transition:         all 2.0s ease;
  }
  .block_design.ready {
    background: #cccccc;
  }
</style>
</head>
<body>
  <div class="block_design ready">ボタンクリックで背景が変化します。</div><br/>
  <button id="button01">変化スイッチ</button>
<script>
  $(document).ready(function() {
    $('#button01').click(function() {
      if ( $('.block_design').hasClass('ready') ) {
        $('.block_design').removeClass('ready');
      } else {
        $('.block_design').addClass('ready');
      }
    });
  });
</script>
</body>
</html>

よく使う例(ボタンhover)

解説

用途・理由・概要

要素をhover(要素上にマウスポインタを重ねたとき)した時、
その要素が押せる事(ボタンである事)を示すため、要素を半透過させます。

汎用クラス

汎用的に使える(個別にクラスを準備しなくても、共通して同じクラスを使用できる)ように、
次のようなクラスを設定します。
.hover {
  -webkit-transition: all 0.6s ease;
  transition:         all 0.6s ease;
}
.hover:hover {
  opacity: 0.6;
}

マウスポインタの形を変える設定を追加して、次のようにしても良いかもしれません。
.hover {
  -webkit-transition: all 0.6s ease;
  transition:         all 0.6s ease;
  cursor: pointer;
}
.hover:hover {
  opacity: 0.6;
}
※ アンカー(a)を使用せずに、onclick や $(class_name).click 等を利用する場合は、マウスポインタが自動で変化しないため。

まとめ

上記ポイントをまとめると、下記のようなコードになります。
<!DOCTYPE html>
<head>
  <title>CSSによるスムーズモーションの実現(よく使う例:ボタンhover)</title>

<style>
  .hover {
    -webkit-transition: all 0.6s ease;
    transition:         all 0.6s ease;
  }
  .hover:hover {
    opacity: 0.6;
  }
  .button_design {
    display: inline-block;
    width:  200px;
  padding: 20px;
  text-align: center;
  color:       #ffffff;
  font-size:   20px;
    cursor: pointer;
  }
  .button_design.type01 { background: #0000ff; }
  .button_design.type02 { background: #00ff00; }
  .button_design.type03 { background: #ff0000; }
</style>
</head>
<body>
  <div class="button_design type01 hover">ボタン1</div>
  <div class="button_design type02 hover">ボタン2</div>
  <div class="button_design type03 hover">ボタン3</div>
</body>
</html>

下部固定メニューの作り方12
(格納式:右上からフェードイン)

animateを使わないスムーズモーション01
(直線出現)