CSSアニメーション、
拡大縮小〜transform:scaleについて。

〽️記述と単位。 〽️scaleX/Y/Z。 〽️外側にorigin。 〽️実例サンプル。 〽️webパーツに最適。





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




こんにちは、「ふ」です。
CSSアニメーション、transform編。個別の関数2回目は、scale(拡大縮小)についてお伝えします。

transform:scaleはボタンなどのwebパーツにもよく使用されているものです。また拡大縮小だけでなく、要素を反転⬆︎させることもできます。

今回も一緒に学んでいきましょう。

記述と単位。


transform:scaleの、1番シンプルな記述は以下の通りです。

#sample { 「「1transform:scale(値);」」 }

(値)の部分には、拡大/縮小したい倍率を数値のみで記述します。単位はありません。

初期値は等倍(拡大も縮小もなし)の「1」です。
「1」を基準に、例えば「0.5」や「2」などと、変化させたい倍率を指定します。

アニメーションで使用してみましょう。

■ HTML

■ CSS

#sample { animation:sample 2s linear infinite; } @keyframes sample { to { 「「1transform:scale(1.5);」」 } }



「scale(1.5)」と指定したので、縦横比が保持されたまま、X方向Y方向が等しく拡大されます。

 ■ 縦横比独立。

次に数値を2つ指定するパターンです。
1つ目の値はX方向の倍率、2つ目がY方向の倍率に反映されます。

to { transform:scale「「1(2,1)」」; }

「X方向:2倍」「Y方向:等倍」としたので、水平方向のみに拡大されました。

scaleX/Y/Z。


scale関数にもX/Y/Z方向に特化したタイプが用意されています。

 ■ scaleX。

#sample { transform:「「1scaleX(0.5)」」; }

「scaleX」は、X成分のみの倍率を指定します。数値も1つしか入れることができません。

 ■ scaleY。

#sample { transform:「「1scaleY(30%)」」; }

「scaleY」は、Y成分のみの倍率を指定します。

「「2■ 同じこと。」」 scaleX(n) = scale(n,1) scaleY(n) = scale(1,n)

これらは通常のtransform(num,num)で書き換えることもできますが、、X/Yを明記したほうがコードの視認性は良いですね。

 ■ scaleZ。

「scaleZ」は、Z成分の倍率です。
しかし、通常のHTML要素はZ成分の大きさを持っていません。rotateなどでZ方向に奥行きができたときのみ働く関数です。
さらにperspectiveを施して3D空間をシュミレートしていないと、見た目での結果を認識することができません。

■ HTML

「「1<div id = "soto">」」 <img src = "sample.svg"> 「「1</div>」」

画像を<div>で囲み、そこに対してperspectiveを指定。
すると子要素に遠近感をシミュレートさせることができます。

■ CSS

#soto { 「「1perspective:500px;」」 } #sample { transform:rotateY(45deg); }



X軸に対して45°回転させたことで、Z方向の奥行きができました。
その上でZ成分を縮小してみます。

#sample { animation:sample 2s linear infinite; } @keyframes sample { bbfrom { transform:「「1scaleZ(1)」」 rotateY(60deg); } bbto { transform:「「1scaleZ(0)」」 rotateY(60deg); } bb}

Z成分を等倍から0にするキーフレームにしました。
奥行きが「0」になると、遠近感もなくなってしまいます。

外側にorigin。


#sample { 「「1transform-origin:-50%;」」 animation:sample 2s linear infinite; } @keyframes sample { bbto { transform:scale(1.5); } bb}

これはtransform-originを左に指定して、X方向に拡大したケースです。
みてみると「拡大」だけではなく要素が左に移動してしまっています。これはどういったことなのでしょうか?

理由は、基準点からの距離も含めた、要素の周りの領域も拡大/縮小されているからです。transform-originは以前の記事でもお話したように、「変形しても動かないポイント」を意味します。originに指定されたポイントを動かさずに、周りの領域ごとscale変形をした結果、要素が移動しているように見えているのです。

実例サンプル。


それではtransform:scaleを使った実例サンプルを3つ、紹介します。

 ■ 反転。

scale関数にマイナスの値を指定すると、逆側に拡大していく.. つまり、反転します。

#sample { animation:sample 2s linear 「「4alternate」」 infinite; } @keyframes sample { bbto { transform:scale「「1(-1);」」 }

Y成分を等倍(既定値)から-1倍に変化させるアニメーションです。

 ■ hoverの際にフォーカス。

さりげないscaleの変化で、ボタンなどのwebパーツを際立たせたりすることができます。

■ HTML

<button class = "btn" style = "background-color:#deb887"> ボタン </button> <button class = "btn" style = "background-color:#87de87"> ボタン </button> <button class = "btn" style = "background-color:#de87bd"> ボタン </button>



■ CSS

.btn { display:block; margin:1em auto; font-size:150%; padding:0.8em 1.4em; font-weight:bold; color:dimgray; border:none; border-radius:0.5em; 「「1transition:0.4s;」」 } .btn:hover { 「「1transform:scale(1.1);」」 }



マウスカーソルを乗せる(タッチパネルだとタップ)すると、各ボタンが少しだけ大きく成増。

■ 画面の外から入ってくる。




impact



3つ目は飛び道具なCSSアニメーションです。
opacity(不透明度)変化させて、テキストが画面の外側から入ってくるような表現をしています。
サイトのタイトルや中見出しに使ってみてください(笑)

#sample { color:darksalmon; font-weight:bold; width:100%; text-align:center; animation:sample 2s infinite; } @keyframes sample { bbfrom { opacity:0; transform:scale(8); } bb}

webパーツに最適。


最後までお読みくださり、ありがとうございました。
今回のtransform:scaleはボタンなどのwebパーツでもよく使われているのを見かけます。 拡大/縮小を行っても隣接要素のレイアウトに影響を与えない点が、うれしいところですね。

一部の要素を際立たせて見せたいとき、配色を変えたりサイズを変えたりして変化を持たせると思います。しかしアニメーションで動きを与えれば、ほかのどの方法よりも識別性を高くすることができます。
皆さんのサイトでもここぞというときにCSSアニメーションを施して、観る人にとってわかりやすいものを目指しましょう!
ではまた〜 🎵



スマホでのhoverを考える。

2021.07.01
4つのパターンで検証。


transform:matrixを理解する。

2021.06.14
行列計算は必要なし。











「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。