CSSアニメーション、
transformの複数指定。

〽️記述と単位。 〽️transformの複数記述。 〽️後に書いたものが内包される。 〽️もう1つのやり方。 〽️+αが質感を生み出す。





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



syntax。


こんにちは、「ふ」です。


要素が上から落ちてくるCSSアニメーション⬆︎。
transform:translateYを使っているのですが、これだけだとどこか機械的、というか、「物理感」がないですよね。


これならどうでしょうか？
keyframes80%ですこし縮んで元にもどる。translateとscaleの両方を施しています。

「CSSアニメーション作り方」、今回は複数のtransform関数を扱う方法や注意点について紹介していきます。メインの動きにさりげない＋αを添えることによって、アニメーションをとても豊かなものに仕上げることができます。

transformの複数記述。


transformに2つ以上の関数を指定したいときには、1つのプロパティに値を半角スペースではさんで記述します。

#element { transform:「「１translateX(20%) rotate(1turn)」」; }

　やりがちなこと。



よくあるのが、この⬇︎ように書いてしまって、「片方しか動かない！」となるケースです。

#element { transform:translateX(20%); transform:rotate(1trun); }

transform自体が１つのプロパティなので、これを例えば<p>要素のattributeである「color」などでたとえると、

p { color:green; color:blue; }

と同じことに成増。
同じ「color」というプロパティをはじめにgreen、後からblueと上書きしている状態です。
ブラウザ上に表示されるのは、後から上書きした「blue」の状態が採用されます。

transfromプロパティは、「ショートハンド的な書式である」と解釈するのが良いでしょう。
あらかじめ各値の初期値が指定されており、明記したもの以外は初期値がそのまま採用される、ということです。

後に書いたものが内包される。

transform関数を複数指定する場合、「後に書いた値が内包される」という現象がおきます。


どういうことなのか？実際に動かしてみて、その様子をみていきます。


要素に対して、回転＋移動のアニメーションをつけてみましょう。

#element { animation:elm 4s linear infinite; } @keyframes elm { to { transform:「「１translate(200%) rotate(2turn)」」; } }

いまキーフレームには、translateを先に、rotateを後に記述しました。

結果はこの⬆︎ように。
言葉で言い表すなら「回転している状態を移動させている」といったところです。

後に記述したrotate（回転）アニメーションは内包され、その外側でtranslate（移動）アニメーションが起こっています。

それでは移動と回転の記述順を入れ替えてみます。

transform:「「１rotate(2turn) translate(150%)」」;

こんどは後に書いた「移動」が内包され、それに対して回転が掛かりました。
「移動している状態が回転している」と言えます。

このようにtransform関数を複数指定する場合には、記述順で結果が変わってくるので注意しましょう。

またtransformには、同じ種類の関数を複数指定することもできます。

transform:「「１rotate(1turn) rotateX(1turn)」」;



これについても後に記述したX軸回転が内包され、外側にZ軸回転が施されました。

つぎは全く同じものを指定してみます。

transform:「「１skew(45deg) skew(45deg)」」;

この⬆︎ような結果になりました。

「skew45°＋45°で、結果skew90°になるのでは？」と思うかもしれません。しかし実際そうであれば、要素は潰れて見えなくなってしまうはずです。
あくまで「skew45°が内包された状態」に対してその外側からskew45°が掛かっているのです。

もう1つのやり方。


複数のtransformを適用させるもう1つの方法としては、HTML要素のほうを親子構造にして、それぞれに別の関数を指定するやり方です。

■ HTML

「「４<div id = "soto">」」 <img id = "elm" src = "elm.png"> 「「４</div>」」

アニメーションの対象がimg要素だったとすると、その外側を<div> 〜 </div> で囲みます。
その上で#sotoに対してと、#elmに対して別々のtransformアニメーションを仕込みます。

これまでお話ししてきた通常の方法で差し支えがなければ、それに越したことはありません。
このやり方が必要となってくるのは、以下の問題がある場合です。

　■ 片方のタイミングが違う。


１つめは複数のtransform関数のタイミングが違っているときです。
要素がscale０%の状態で始まり、キーフレーム50%の時点でscale100%に。キーフレーム100%までその状態を保ちます。
ここに回転が加わります。rotateはキーフレーム0〜100%まで掛けて１回転させたい。

#element { animation:elm 4s infinite; } @keyframes elm { from { transform:rotate(0deg) scaleX(0) } 50% { transform:「「４rotate(0.5turn) 」」scaleX(1); } to { transform:rotate(1turn) scaleX(1); }

scaleのほうは全体の半分のところで終了するため、50%のところにキーフレームを打ちました。一方rotateについてはまだ進行中なので、50%の時点の状態、「0.5turn」としています。



結果⬆︎です。
scaleに関してはキーフレーム50%のところまでスムーズに流れています。ところが、rotateのほうは50%のところで一旦停止してしまって、スムーズではありません。

原因はanimation-timing-functionが初期値のeaseになっているからです。
「linear」であれば進捗が均等に振り分けられるため、問題はないのですが、linear以外のtiming-function下では「キーフレーム50% = 進捗50%」とはならないため、途中でキーフレームを打つとスムーズな動きが失われてしまうのです。

「「４<div id = "soto">」」 <img id = "elm" src = "elm.png"> 「「４</div>」」

画像要素を<div id = "soto">で囲み、#sotoと#elmに対し個別のCSSアニメーションを指定します。

#soto { animation:soto 4s infinite; } @keyframes soto { to { transform:rotate(1turn); } } #elm { animation:elm 4s infinite; } @keyframes elm { from { transform:scaleX(0); } 50% { transform:scaleX(1); } }

rotateの動きも一旦停止することなく、スムーズになりました。

　■ transform-originを別にしたい。

要素自身をその中心を軸に「自転」させつつ、別の基準点を中心として「公転」もさせたい。
ということは２つの動きにおいてtransform-originが違ってくることに成増。

CSSのtransform-originは一意にしか指定できないので、こういった場合も親子構造にする必要があります。

#soto { 「「４transform-origin:150%;」」 animation:el8 linear 4s infinite; } #elm { animation:elm 4s linear infinite; } @keyframes elm { to { transform:rotate(1turn); } }

自転・公転ともに上手くいきました。
親と子にそれぞれ1turnを指定しているので、「element」は２回転することに成増。

「「３違うプロパティの場合にのみ有効」」 #element { animation:「「４animateA 2s,animateB 2s」」; }

ちなみに１つの要素に対して複数のCSSアニメーションを指定することもできます⬆︎。
ただしそれぞれのキーフレームで同じプロパティの操作を行うと、干渉し合ってうまくいきません。

例えば「animateA」がopacity、「animateB」がbackground-colorの変化。これならちゃんと動きます。

しかし片方がrotate、もう片方がskewの操作..といった場合。２つはもともと同じtransformプロパティとなるので、不具合が生じてしまいます。

+αが質感を生み出す。


最後までお読みくださり、ありがとうございました。

今回取り上げたtransformの複数指定。
静止している要素ならいいが、アニメーションさせるとなるといくつか「フォローすべき点」が出てきましたね。
しかし。単一のtransform関数にさりげないもう1つの関数を添えてやると、より自然で豊かなCSSアニメーションを実装することができます。
実戦では試す機会も多いかと思いますので、是非覚えておいてください。

ではまた〜 🎵











「ふ」です。

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