CSS3のtransitionで使えるイベント〜transitionのトリガー | IT工房｜AI入門とWeb開発

transitionアニメーションを実行するには何らかのトリガー（イベント）が必要です。通常は:hoverが使用され、マウスがホバーすると簡単なアニメーションを行ったりします。けれどもトリガーになるのは:hoverだけではありません。
色々なトリガーを使い分けてシンプルで使い勝手のよいページ作成に役立ててください。

次のサンプルがマウスホバーでのtransitionアニメーションです。transitionの記述は:hoverの方に入れるのではなく、.baseの方に記述するのがポイントです。

マウスホバーでアニメーションするサンプル

HTMLコード

　<div class="base"></div>

CSSコード

　.base{
      width:200px;
      height:100px;
      background-color: red;
      transition :all 1s;
    }
    .base:hover{
      width:300px;
    }

アニメーションの対象

トリガーの問題に入る前にアニメーションの対象について寄り道してみます。
アニメーションの対象もセレクタを上手に選定することで、イベント対象の要素自体をアニメーションするのではなく、その子要素や兄弟要素をアニメーションさせることができます。

子要素をアニメーション

マウスホバーした要素の子要素をアニメーションします。
「.base:hover」に子孫要素の設定をすることで実現します。

子要素をアニメーションするサンプル
HTMLコード

  <div class="base">
    <div class="sub">AAA</div>
  </div>

CSSコード

  .base{
      width:200px;
      height:100px;
      background-color: red;

    }
    .sub{
      width:100px;
      height:50px;
      background-color: blue;
      transition :all 1s;
    }
    .base:hover .sub{
      width:300px;
    }

兄弟要素をアニメーション

マウスホバーした要素のすぐ後の兄弟要素をアニメーションします。
セレクターの設定を「 .base:hover + .sub」とすることで実現します。

兄弟要素をアニメーションのサンプル
HTMLコード

  <div class="base"></div>
  <div class="sub">AAA</div>

CSSコード

  .base{
      width:200px;
      height:100px;
      background-color: red;

    }
    .sub{
      width:100px;
      height:50px;
      background-color: blue;
      transition :all 1s;
    }
    .base:hover + .sub{
      width:300px;
    }

さらに複雑な兄弟要素のアニメーション

マウスホバーした要素のある特定の兄弟要素をアニメーションします。
セレクター設定の「.base:hover ~ .sub」がポイントです。
さらに複雑な兄弟要素のアニメーションのサンプル
HTMLコード

<div class="base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non magnam et, incidunt. Dicta, debitis sequi consequatur exercitationem nesciunt, quaerat ea inventore amet, nam ipsum omnis quasi suscipit. Voluptates, earum, optio.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nulla voluptate magni similique officiis expedita dignissimos eligendi! Quae hic laboriosam voluptatem non dicta ipsum velit cum, at iure sed blanditiis.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nulla voluptate magni similique officiis expedita dignissimos eligendi! Quae hic laboriosam voluptatem non dicta ipsum velit cum, at iure sed blanditiis.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nulla voluptate magni similique officiis expedita dignissimos eligendi! Quae hic laboriosam voluptatem non dicta ipsum velit cum, at iure sed blanditiis.</div>
  <div class="sub">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, excepturi. Soluta, molestias vitae quas veritatis saepe delectus culpa fuga placeat ipsam, minus corrupti, laudantium. Magni nobis numquam commodi, iure animi.</div>

CSSコード

div{
    background-color: yellow;
    border: 1px solid #000;
  }
    .base{
      width:500px;
      background-color: red;

    }
    .sub{
      width:500px;
      background-color: blue;
      transition :all 1s;
    }
    .base:hover ~ .sub{
      width:300px;
    }

さまざまなトリガーの種類

CSSでトリガーになるセレクターは:hoverだけではありません。
:active,:target,:focus,:checkedもトリガーになります。またjQueryのイベントやメディアクエリもトリガーになります。

:activeをトリガーにする

要素をクリックした瞬間のイベントです。サンプルで確認してください。

:activeをトリガーにするサンプル
HTMLコード

  <div class="base"></div>

CSSコード

  .base{
      width:200px;
      height:100px;
      background-color: red;
      transition :all 1s;
    }
    .base:active{
      width:300px;
    }

:targetをトリガーにする

ページ内リンクなどで使うものですが、工夫次第で面白い仕掛けを作ることもできそうです。リンクをクリックしたときにイベントが発生します。

:targetをトリガーにするサンプル
HTMLコード

  <p><a href="#base">ここをクリック</a></p>
  <div id="base"></div>

CSSコード

  #base{
      width:200px;
      height:100px;
      background-color: red;
      transition :all 1s;
    }
    #base:target{
      width:300px;
    }

:focusをトリガーにする

これの用途は、フォームのテキスト入力に限られるかもしれません。テキストボックスにフォーカスしたときにイベントが発生します。

:focusをトリガーにするサンプル
HTMLコード

  <p><input type="text" id="base"></p>

CSSコード

  #base{
      transition :all 1s;
    }
    #base:focus{
    background-color: pink;
    }

:checkedをトリガーにする

これもフォーム関連のイベントです。on.offするトグルスイッチの機能を利用したイベントを作ることができます。
このイベントを利用してJavaScriptなしでドロワーを作成する例などもネット上でみられます。

:checkedをトリガーにするサンプル
HTMLコード

  <p>
  <input type="checkbox" id="base">
  <span></span>
  </p>

CSSコード

  #base+span{
      display:block;
      width:200px;
      height:100px;
      background-color: blue;
      transition :all 1s;
    }
    #base:checked+span{
      background-color: pink;
    }

メディアクエリーをトリガーにする

メディアクエリーもトリガーになります。工夫次第で用途が多いと思われます。注意点としてレスポンシブなサイトの場合には、逆に意図しないアニメーションが起こる可能性があることです。画面サイズを変更したらアニメーションするはずのないものがアニメーションしたりする可能性があります。

次のサンプルはその例です。
このサンプル例はPCサイズでは赤のボックスのマウスが重なるとゆっくりと青にアニメーションしながら変化することを目的に作成しています。
そして画面サイズが500px以下になったときは赤のボックスが瞬間的に緑に変化させるつもりで作成したものです。
けれども、画面を500px以下にしたときマウスをホバーしたわけでもないのに赤が緑にアニメーションします。これはメディアクエリがトリガーになってアニメーションを開始しているのです。つまり意図しないアニメーションが行われる結果になったのです。
ナビゲーションにつけたアニメーションが画面を縮めると一斉にアニメーションを始める怪奇現象が起こるかもしれませんね。

メディアクエリーをトリガーにするサンプル
HTMLコード

  <div class="base"></div>

CSSコード

  .base{
      width:200px;
      height:100px;
      background-color: red;
      transition :all 1s;
    }
    .base:hover{
      background-color: blue;
    }
    @media (max-width:500px){
    .base{
      background-color: green;
    }
}

これを解決する良い方法は見つかりません。それぞれのアニメーションをjQueryなどと切り分けるなど工夫が必要になります。
メディアクエリがトリガーになる意図しないアニメーションに要注意！

jQueryをトリガーにする

jQueryのイベントを利用してクラスをon,offすることでCSSにイベントを伝えます。jQueryと連携する方法がもっとも使いやすい方法と思われます。

jQueryをトリガーにするサンプル
HTMLコード

  <div class="base"></div>

CSSコード

  .base{
      width:200px;
      height:100px;
      background-color: red;
      transition :all 1s;
    }
    .base.on{
      width:300px;
    }

jQuery

  $(function(){
    $('.base').click(function(){
      $(this).toggleClass('on');
    })
  })