フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

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

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

CSS transitionについて②、
プロパティと一括指定。

〽️① transition-duration。 〽️② transition-property。 〽️③ transition-timing- function。 〽️④ transition-delay。 〽️一括指定（ショートハンド）。 〽️アイデアは浮かびましたか？

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

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

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

① transition-duration。

#sample { transition-duration:〇〇s; } 初期値：0s

「trnasition-duration」は、アニメーションの継続時間を指定します。単位として「s（秒）」または「ms(ミリ秒)」を付けて指定します。
transitionを実装するには最低限必要なプロパティです。

サンプル⬆︎です。
「:hover」を利用して、マウスカーソルを乗せると色と形が変化するようにしてあります。

※スマホなどのタッチデバイスでご覧の方は、要素を指でタップしてみてください。

<div id = "sample1"></div>

#sample1 { width:8em; height:8em; background-color:blue; margin-left:10%; } #sample1:hover { 「「４border-radius:50%; background-color:orangered;」」 }

ここに2sのtransition-durationを指定してみましょう。

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

指定どおり、２秒かけてborder-radiusとbackground-colorが変化するようになりました。

transition-durationの初期値は「0s」となっており、そのままだとCSSの変更が瞬間的に行われてしまいます。
つまり、初期値以外の値を指定してやらないと、transitionが発生しません。

② transition-property。

#sample { transition-property:（プロパティ名）; } 初期値：all

「transition-property」は、transitionの対象となるプロパティを限定します。
どのような使い方をするのでしょうか？

⬆︎先程のduration「2s」を指定したサンプルです。
hover時に変化するプロパティは、「background-color」と「border-radius」でした。
現在transition-propertyは特に指定しておらず、初期値の「all」となっています。「all」の場合、変更するプロパティの全てにtransitionが施されます。

hoverしたとき。
border-radiusはまあいいとして、background-colorについては連続変化させると少し気持ち悪いですよね💧

transition-propertyで以下⬇︎のように記述し、transitionさせるプロパティを「border-radius」に限定しましょう。

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

背景色はhoverの瞬間に変化し、border-radiusだけをtransitionさせることができました。

変更させるプロパティのうち、アニメーションさせたくないものがあればtransition-propertyで制御することができます。

transition-propertyの対象を複数指定したい場合には、カンマ「 , 」で区切って記述します。

#sample1 { 　〜 略　〜 transition-duration:2s; transition-property:「「１border-radius,background-color;」」 }

bordrer-radiusとbackground-colorの両方をtransitionさせることができました。
う〜ん、やっぱり色変化は気持ち悪いな（笑）　

■ 「none」もある。

#sample { transition-property:「「１none」」; }

transition-propertyには「none（対象先：なし）」という値も用意されています。
これはどういった使いどころがあると申すのか？

例えば。
複数の要素に対し、class名を使って一括でtransitionを指定しているのだが、特定の要素だけtransitionを解除したい場合。

そんなときにはdiv名をつけて参照し、「none」を指定するといいでしょう。

③ transition-timing- function。

#sample { transition-timing-function:「値」; } 初期値：ease

「transition-timing-function」はキーフレームアニメーションの「animaiton-timing-function」にあたるものです。

値は、キーフレームのtiming-functionと同じものをひととおり使うことができます。

⬆︎先ほどのサンプル、transition-timing-functionは指定しておらず、初期値の「ease」のままです。
hover（またはタップ）したときのアニメーションの進捗。はじめは少し急に進行し、最後はなめらかに終わっています。

timing-functionを「linear」に指定してみます。

#sample1 { 　〜 略 〜 animation-duration:2s; animation-property:border-radius; 「「１animation-timing-function:「「５linear;」」」」 }

timing-functionに「linear」を指定したことにより、hover時のアニメーション進捗が直線的になりました。
他にもやってみましょう。

#sample1 { 　〜 略 〜 animation-duration:2s; animation-property:border-radius; animation-timing-function:「「５cubic-bezier(0.9,0,0.9,0.1)」」; }

極端なcubic-bezierを掛けました。
アニメーションの進捗ですが、終盤の追い上げが激しいです。

#sample1 { 　〜 略 〜 animation-duration:2s; animation-property:「「５all」」; animation-timing-function:「「５steps(4,jump-none)」」; }

stepsを使ったコマ送り。
今度はtransition-propertyを「all」とし、background-colorもステップアニメーションさせています。
色の変化は連続的だとちょっと気持ち悪いですが、コマ送りにすると見た目悪くないですね。

cubic-bezierとstepsについては、キーフレームアニメーションの記事⬇︎で詳しく紹介しています。

　

cubic-bezier。

▶︎ ３次ペジェ曲線とは？

▶︎ 任意の変化曲線を指定する。

　

steps。

▶︎ コマ送りアニメーションの実装。

▶︎ timing-functionとキーフレームの関係。

④ transition-delay。

#sample { transiton-animation-delay:〇〇s; } 初期値：0s

この「transition-delay」も、キーフレームアニメーションに同用意されている「animation-delay」に該当します。
挙動はキーフレームのものと全く同じで、単位は「s（秒）」または「ms(ミリ秒)」。

仕込んでみましょう。

#sample1 { 　〜 略 〜 animation-duration:2s; animation-property:border-radius; 「「１animation-delay:1s」」; }

hover（またはタップ）すると１秒後にtransitionアニメーションが開始されます。
解除のときにもdelayが適用されるんですね。

一括指定（ショートハンド）。

#sample { transition: (各プロパティの値を並べる); }

transitionアニメーションにも一括指定（ショートハンド）ができるtransitionプロパティが用意されています。これまでのプロパティをまとめてみましょう。

#sample1 { 「「３transition-duration:2s; transition-property:border-radius; transition-timing-function:linear; transition-delay:1s;」」 }

この⬆︎ような長ったらしい記述。
tansitionプロパティに、値のみを半角スペースで区切って記述します。

#sample1 { 「「１transition:2s border-radius linear 1s;」」 }

⬆︎１行で済ませることができました。
便利なので是非使ってください。ただし、以下の２点に注意が必要です。

■ 記述順の注意。

durationとdelayの値は同じ「sまたはms」となっています。
キーフレームアニメーションの場合と同じく、先に記述されたほうがtransition-duration、後のものがtransition-delayとみなされます。

「2s」と「1s」という値があったとします。
２つの記述順を前後させて、結果を比べます。

#sample1 { transition:「「１2s」」 border-radius linear 「「４1s」」 ; }

先に記述した「2s」がduration（所要時間）とみなされ、後ろの「1s」がdelayとしてレンダリングされました。

#sample1 { transition:「「４1s」」 border-radius linear 「「１2s」」 ; }

記述順を逆にすると、duration「1s」、delay「2s」として扱われます。

意図したtransitionアニメーションが実装できるよう、２つのプロパティ値の記述順には注意してください。

■ propertyが複数のバヤイ。

もう１つ注意点が。
「transition-property」の対象はカンマで区切ることによって、複数指定することができました。

#sample { transition-property:「「１border-radius,opacity」」; }

ただし、この「カンマ区切り記述」をそのままショートハンドに埋め込むことはできません。

「「４✖️ これはダメ。」」 #sample { transition:1s 「「４border-radius,background-color」」; }

transition-propertyが複数の場合、「ショートハンドのセットを複数記述する」必要があります⬇︎。

「「１○ このように記述する」」 #sample { transition: 「「１bb1s border-radius, bb1s background-color」」 bb; }

　「（１つのプロパティ先と他の値）,（１つのプロパティ先と他の値）」

〜というように、複数のショートハンドのセットを作り、カンマで区切って記述します。
めんどくさいですね💧

....でも、

おもろいことになる。

「ショートハンドを複数セットできる」ということは、「異なる状況のtransitionを施すことができる」ということですね、

遊んでみましょう。

#sample1 { transition: 「「１bb1s border-radius linear」」, 「「５bb3s background-color ease 1s」」 bb; }

border-radiusは「１秒間かけて直線的に変化」、background-colorは「1秒のdelay後、3秒かけてstepsで変化」としました。

結果がこちら⬆︎です。
hover（またはタップ）すると、要素がはじめの１秒で変形、残りの3秒で変色するようになりました。
「何に使うんだ？」と言われそう（笑）ですが、このようなトリッキーなこともtransitionで実装することができます。

アイデアは浮かびましたか？

最後まで読んでいただき、ありがとうございました。
２記事に渡ってCSSのtransitionについて紹介してきました。なにか面白い使い方があるかも・・皆さんのほうでアイデアは浮かんできたでしょうか？

記事中のサンプルでは擬似要素の「:hover」を使ってきましたが、hover解除で元に戻るときにもアニメーションしてくれる、←ここがキーフレームアニメーションとは違っている点です。transitionならではの効果をねらう上で、ヒントになってくるかもしれません。

ゼロから新しいものを作ってみることは、問題解決能力upに直結します。いろいろ実験してみてくださいね。ではまた〜 ♪