フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

「ふ」のtwitter。記事を更新するとつぶやきます。

コメント・お問い合わせはこちら。

CSS transitionについて(1)。

〽️transitionの仕組み。 〽️指定方法。 〽️簡単サンプル。 〽️キーフレームとの使い分けは？ 〽️時間的装飾にtransition。

• CSSアニメーション、作り方。
  

  2020.04.17
  webアニメーションを１から学ぼう♪

⬆︎CSSアニメーションについてのまとめページはこちら。

transitionの仕組み。

transitionとは、「移り変わり」などと訳されます。CSSのtransitionとは、どのような仕組みになっているのか？

ボタン要素を１つ作って試してみましょう。

<button id = "sample1"> button </button>

#sample1 { width:5em; height:2em; color:blue; border-color:blue; background-color:#fff; border-radius:10px; font-size:2em; }

この⬆︎ようなボタンを作りました。
擬似要素「:hover」を使い、マウスカーソルを乗せたときに色が反転するようにしてみます。

#sample1:hover { background-color:blue; color:#fff; }

ボタンにマウスカーソルを合わせると文字色と背景色が反転します。タッチデバイスの方は指でタップしてみてください。
当然なのですが、hover状態になったときにプロパティの値は瞬間的に変更されます。

〜ではボタン自体のCSSに、２秒間のtransitionを指定してみましょう。

#sample1 { 　〜略〜 「「１transition-duration:2s;」」 }

マウスを乗せる（またはタッチする）と、２秒間かけて色が反転するようになりました。

このようにCSSのtransitionは、プロパティ値の変更を「指定した時間に従って連続的に変化させる」役割をします。

指定方法。

transitionの記述方法について紹介します。
はじめに知っておきたいこと。transitionはキーフレームアニメーションとは違い、自発的にプロパティ変化をさせるものではありません。

element「「４:hover」」 { ... }

先程使った擬似要素の「:hover」や、

<button 「「４onclick = "function()"」」></button> 「「３※ プロパティ変化させる関数を呼び出し」」

JavaScriptのプロパティ変化をさせる関数への紐付けなど、「変化させる仕組みが別で用意されている」ことが前提です。

transitionに関するプロパティは４種類あります。

　① transition-property
　② transition-duration
　③ transition-timing-function
　④ transition-delay

キーフレームアニメーションを学習してきた皆さんであれば、②③④の内容はなんとなく想像がつきますね、ふふふ。

①のanimation-propertyは、transitionを施す「対象のプロパティ」を指定するものです。
初期値は「all（特に制限なし)」となっています。特殊な効果を狙わない限りは、初期値のままで構わないでしょう。

各プロパティの詳細については次回の記事で紹介する予定です。今回は、最小構成のサンプルを作ってみましょう。

簡単サンプル。

それではtransitionを使った簡単なCSSアニメーションのサンプルを作ってみましょう。

この⬆︎ような箇条書きのリストがあったとします。
各項目にマウスカーソルが乗ったとき、テキストがアニメーションしながら強調されるようにしていきます。

<p class = "focus">項目１</p> <p class = "focus">項目２</p> <p class = "focus">項目３</p>

HTMLの部分はこのように。項目ごとにclass名「focus」としています。

先程もお話ししましたが、transitionは「変化させる仕組み」があって初めて動作します。先づはその仕組みを用意します。

.focus:hover { font-weight:bold; color:blueviolet; letter-spacing:2px; }

「.hover」で太字＋色変更＋字間を少し広げるようにしました。

マウスを乗せて（スマホ/タブレットならタッチ）してみると、プロパティ値が変更されました。

これで「変化させる仕組み」の準備はOK。
ただこのままでは動きがカクついていてどこか自然ではない💧

そこで、transitionのコードを追加します。

.focus { 「「１transition-duration:0.6s;」」 }

transitionを施すと要素が「ニョキッ」と変化するようになり、自然な感じが出ました 🎵

これが「最小構成のtransition」です。プロパティは４つあるのですが、そのうちtransition-durationを記述するだけで実装が可能です。

キーフレームとの使い分けは？

ここまでCSSのtransitionアニメーションについて紹介してきました。
扨（さて）、transitionとキーフレーム。どのように使い分けるのが理想なのでしょうか？　比較してみましょう。

　▶︎ transitionのほうがお手軽？

先ほどのサンプルは、キーフレームアニメーションでも似たようなものが作れます。

.focus:hover { animation:focus3 0.6s forwards; } @keyframes focus ｛ bbto { font-weight:bold; color:blueviolet; letter-spacing:2px; } ｝

キーフレームアニメーションで書くとしたら、この⬆︎ように。

....コードの量は対して変わりません。transitionのほうが「お手軽に実装可能」とは言い難いです。

　▶︎ transitionは「戻り」がある。

キーフレームアニメーションで実装した場合、transitionのときと少し違いがあります。
⬆︎はキーフレームで実装したもの。
hover時はフツーにアニメーションしてくれます。しかしhoverが外れると、瞬間的にアニメーションがキャンセルされて元の状態に戻ってしまいます。

一方で⬆︎はtransitionを使用。
hoverが外れたときにも急に元に戻るのではなく、アニメーションしながら戻っていきます。このほうがスムーズですね。

　▶︎ 一意の変化しかできない。

ただし。transitionはあくまで「始め」と「終わり」の２つの状態しか表現することができません。複雑なCSSアニメーションを作りたいのであれば、キーフレームアニメーション１択です。

時間的装飾にtransition。

以上のことから、transitionとキーフレーム次のように使い分けるのがお勧めです。

・３つ以上の変化をする、複雑なアニメーション
➡︎　キーフレームを使用。

・単純なプロパティ変更をスムーズに見せたい
➡︎　transitionが便利。

transitionは「アニメーションを作り込むためのもの」と言うよりは、「プロパティ変化を自然に見せる」という時間的な装飾に向いています。
皆さんもうまく使い分けてください。

最後までお読みくださり、ありがとうございました。次回はtransitionのプロパティについて、詳しく見ていきたいと思います。dehaまた〜 🎵