SVGアニメーション02、画像を宙に浮かべる。

〽️ 要素を変形させるtransformプロパティ。

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

2020.06.30
静的コンテンツの枠を飛び出す。

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

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

⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

こんにちは、「ふ」です。
SVGアニメーションチュートリアル２回目は、「宙に浮かんだような画像」の表現に挑戦したいと思います。ではやっていきましょう。

キーフレームと作戦。

「画像を宙に浮かべる」ためのキーフレームを考えていきます。

0% : 定位置
⬇︎
50% : 少し下に沈める
⬇︎
100% : 定位置に戻す
⬇︎
ループ。

画像を少し上下に動かし続けることにより、空中で浮いているような表現を目指します。

次に、このキーフレームを実現させるための作戦をたてます。

作戦

1.SVGをHTML内にインライン表記または参照表記。

2.CSSでSVGを参照し、transformプロパティを使って上下させる。

3.自然な動きになるよう、タイミングなどを調整。

今回においてもSVG画像全体にアニメーションを仕込むので、HTML内には参照形式で貼っても問題ありません。
画像を上下させるアニメーションはCSSのtransformプロパティを使いましょう。

SVGを配置。

◼︎ fu.svg

HTMLの<body>〜</body>内にSVG画像を貼り付けます。CSSで参照する時のために「ani_02」とクラス名を付けました。

HTML（参照表記）

HTML（インライン表記）

外部ファイルを参照させる場合はimgの属性に、インライン表記の場合はsvgの属性にclass名を付けます。
参照表記を使えば、SVG以外の.png画像などにも応用できますね。

そのあと、CSSで参照してサイズなどを整えます。目的に合った配置を仕込んでください。

CSS

.ani_02 { width:50%; margin-left:25%; }

ブラウザで表示します。

ブラウザ

表示できました。CSSアニメーションを仕込んでいきましょう。

transformプロパティ。

「ani_01」のCSS内にアニメーションプロパティを追加しましょう。

animation-name : ani_02 animation-duration : 2s animation-itertion-count : infinite

今回指定するのは

・アニメーション名　「ani_02」
・継続時間　2s
・繰り返し回数　infinite（無限）

これらをショートハンドで記述します（そのほうが楽なので）。

CSS

.ani_02 { width:50%; margin-left:25%; 「「１animation: ani02 2s infinite;」」 }

ani_02セレクタにプロパティを記述しました。次にこの「ani_02」にキーフレームを追加します。ここで使うプロパティと値がこれ⬇︎。

transform : translateY( )

CSSに用意されているtransformプロパティを使えば、移動などを含めた「変形」を指定することができます。
これから皆さんがwebアニメーションを展開していく上で頻繁に利用することになりそうですね。

値として記述するtranslateY( )は、要素のY方向の位置を指定します。アニメーション進捗のタイミングに合わせてこのプロパティを変化させれば、画像が上下している表現ができるはずです。

キーフレームは、「.ani_02」セレクタの外部に別途記述することにも注意してください。

CSS

.ani_02 { width:50%; margin-left:25%; animation: ani02 2s infinite; } 「「１@keyframes ani02 { 0% { transform: translateY(0); } 50% { transform: translateY(-4%); } 100% { transform: translateY(0); } }」」

はじめに考えたキーフレームに従い、アニメーションの中間地点（50%）で画像を少し下にしずめ、最終的に（100%）元の位置に戻しています。
結果をみてみましょう。

result

このようになりました。
いちおーアニメーションとしては成功しています。

違うな・・風に揺れているというよりは、「自力で上下している」といった感じですね。