解 説

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

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

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

HTMLコード

CSSコード

アニメーションの対象

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

子要素をアニメーション

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

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

CSSコード

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

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

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

CSSコード

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

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

CSSコード

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

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

:activeをトリガーにする

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

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

CSSコード

:targetをトリガーにする

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

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

CSSコード

:focusをトリガーにする

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

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

CSSコード

:checkedをトリガーにする

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

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

CSSコード

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

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

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

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

CSSコード

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

jQueryをトリガーにする

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

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

CSSコード

jQuery