CSSアニメーション、
移動〜trnasform:translateについて。

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





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




こんにちは、「ふ」です。
CSSアニメーション、transform編。今回はtranslate(移動)について学習していきましょう。

記事前半ではtranslateの種類や使い方、後半ではtranslateを利用したCSSアニメーションのサンプルを紹介します（←今回少しレベル⤴︎かも、ふふふ）。

記述と単位。


transform:translateの基本形はこちら⬇︎。

transform:「「１translate(X方向、Y方向);」」

（ ）にはX方向の移動量、Y方向の移動量をカンマで区切って記述します。順番が逆にならないように気を付けてください。
移動量の値にはpxなどの絶対値やem、vwといった相対値を記述することができます。

要素をアニメーションさせてみましょう。

#element { animation:elm 2s infinite; } @keyframes elm ｛ bbto { 「「１transform:translate(20px,50px);」」 } bb｝




X方向に20px、Y方向に50px移動しました。
webにおけるX方向は左から右へ、Y方向は上から下へ向かっているということに注意してください。

移動距離を１つしか記述していない場合、それはX方向に対する指定だとみなされます。

transform:translate「「１(5em)」」;

Y方向はデフォルトの「移動なし」として扱われます。従ってX方向だけに要素が移動します。

「%」は自身が基準。

translateの移動距離には「px」や「vw」など、「大きさ」に関する色々な単位が使用できますが、「%」の場合だけは挙動が変わってきます。
通常marginやwidthなどに「%」を使った場合、その対象は親要素とされます。

@keyframes elm ｛ bbto { 「「４margin-left:50%;」」 } bb｝

サンプル要素の親は<body>です。
margin-leftを50%としたため、比率対象である<body>の50%ぶん、左マージンが取られました。

次はtranslateで50%を指定してみます。

@keyframes elm ｛ bbto { transform:「「１translate(50%)」」; } bb｝

先程よりも動きが小さくなりました。
「50%マージンを取る」と「50%移動する」ではなぜ結果が違うのでしょうか？

多くのCSSプロパティにおいて、大きさとして「%」を指定すると、その比率対象は親要素と成増。が、translateの移動距離として「%」を指定した場合、自身の領域が比率対象とされます。
CSSアニメーション作成中、「移動距離がおかしい」などというときには、このことを思い出してみてください。

translateX/Y/Z。


translate関数にも、X/Y/Z方向を限定したものが用意されています。

　■ translateX。

transform:translateX(移動量);

X方向の移動のみを指定する関数です。
先程のキーフレームを書き換えてみましょう。

@keyframes elm ｛ to { transform:「「１translateX(50%)」」; }

結果がこちら⬆︎です。
もうお気づきと思いますが、これは通常のtranslateに値１つだけを指定した場合やY成分を「0」に指定した場合と同じ動作と成増。

「「２■ 同じこと。」」 translate(50%); translate（50%,0);

　■ translateY。

transform:translateY(移動量);

Y方向の移動を指定します。

@keyframes elm ｛ to { transform:「「１translateY(-50%)」」; }

これについても通常のtranslateでX成分を「0」にしたときと同じ動きです。

「「２■ 同じこと。」」 translate（0,-50%);

　■ translateZ。

transform:translateZ(移動量);

Z成分の移動を行う関数です。
平面上ではモニターできないので、例によって親要素にperspectiveを指定します。

■ HTML

<div class = 「「４"soto"」」> <img id = "element" src = "element.svg"> </div>

■ CSS

「「４.soto」」 { 「「１perspective:500px;」」 } #element { animation:element 2s infinite; } @keyframes element ｛ bbto { transform:「「１translateZ(-50em)」」; }

Z成分の方向は奥から手前です。「-50em」を指定すると後方に下がっていきました。
なお、要素領域は平面のため、そもそもの奥行きは存在しません。従ってtranslateZにおける「%」指定では比率の基準が見つからないため、何も起こりません。

ところでこのtranslateZ、画像をグーパンチにすると面白そう..今度作ってみます。

実例サンプル。


それではtranslateを使った実例サンプルを３つ、紹介していきます。

　■ 要素を浮かべる。

要素を少しだけY方向に往復させ、宙に浮かんでいるようにしてみました。

#element { animation:element 1s 「「４ease-in-out alternate」」 infinite; } @keyframes element ｛ bbto { 「「１transform:translateY(1em);」」 } bb｝

「ふわふわ感」が出るように、animation-timing-functionを「ease-in-out」としています。

　■ 壁に衝突。

前回のscale( )関数と組み合わせて、「壁に衝突→衝撃で少し縮んでから停止」というものを作ってみました。
ロゴの登場に使ったりできるかも。

#sample { 「「４transform-origin:right;」」 animation:sample 2s linear infinite; } @keyframes sample ｛ bbfrom { bbtransform:translate(-100%) scale(1); } bb50% { bbtransform:translate(15%) scale(1); } bb65% { bbtransform:translate(15%) 「「１scale(0.6,1.2)」」; } bb80% { bbtransform:translate(15%) scale(1); } bbto { bbtransform:translate(15%) scaleX(1); } bb｝

transform-originを衝突する壁側（この場合はright）に指定。
移動量やバウンドのタイミングは要素の大きさに合わせて調節してください。

　■ エンドレスに流れる画像。



２つのimgをdisplay:flexで横並びにし、エンドレスにスクロールさせるサンプルです。

　■ HTML

<div class = "soto"> <img id = "img1" class = "endless" src = "img1.png"> <img id = "img2" class = "endless" src = "img2.png"> </div>

　■ CSS

１.soto { display:flex;　「「１..①」」 width:50%; margin:0 auto; overflow:hidden; } .endless { display:block; width:100%;　「「１..②」」 height:100%;　「「３</*safari対策*/>」」　 flex-shrink:0;　「「３</*firefox対策*/>」」 } #img1 { animation:img1 4s linear infitite; } @keyframes img1 ｛ bbfrom { transform:translate(100%); } bbto { transform:translate(-100%); } bb｝　「「１..③」」 #img2 { animation: img2 4s 「「１2s」」 linear infinite;　「「１..④」」 } @keyframes img2 ｛ bbfrom { transform:translate(0%); } bbto { transform:translate(-200%); } bb｝　「「１..⑤」」



時間差で２つの画像を画面右外から左外へと移動させています。２つの画像は別々のキーフレームになることが注意点です。

①② 親要素にdisplay:flexを指定し、なおかつ画像サイズはwidth:100%。
ということは現段階でそれぞれの画像の位置はimg1が画面中央、img2が画面右外に位置しています。

③ img1にとっての画面右外は、translate(100%)、画面左外はtranslate(-100%)です。fromとtoの状態をそのように指定します。

④ アニメーション開始２s後、img1は画面いっぱいに表示されています。ここでimg2のアニメーション進捗開始。

⑤ img2にとっての画面右外は、translate(0)、画面左外はtranslate(-200%)なので、そのようにキーフレームを作成しましょう。

最後のサンプルは少し複雑ですが、ぜひチャレンジしてみてください。
ブログのヘッダ下などに実装すると、ページが華やかになること間違いなしです。

観ていて楽しいものが作れる。


最後までお読みくださり、ありがとうございました。
今回紹介したtransformのtranslate関数。実例サンプルでも取り上げたように、アクション豊かで観ていて楽しいCSSアニメーションが実装できます。皆さんも面白いものを作ってみてください。

扨（さて）次回はtransformの基本関数、最後４つ目の「skew」について紹介する予定です。これもトリッキーなものなので、楽しみにしていてください！
ではまた〜 ♪♪











「ふ」です。

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