SVGとCSSで作る、吹き出しアニメーション。

〽️画像を配置。 〽️回転と基準点。 〽️transformはまとめて書く。 〽️アニメーションさせましょう。 〽️色んな吹き出しを取り入れよう。





⬆︎SVGついてのまとめページはこちら。

こんにちは、「ふ」です。
今回はタイトル部分のような、吹き出しが回転しながら出てくるアニメーションを作りたいと思います。

吹き出しの作り方として、CSSのbeforeやborderを駆使したものがブログでもよく見かけますが、 SVGを使えば吹き出しの枠は「秒」で作ることができます。
但し、テキストの長さによって吹き出しの大きさが可変したりはしないので、これはちょっとした「定型セリフ用」です。たとえば‥



▶︎要素を回転させる
transform : rotate( )

▶︎変形の基準点を移動させる
transform-origin :

▶︎transformの複数指定の記述について。

こんな⬆︎感じで「注目させたい部分」の見出しに使えそうな、アニメーションを作っていきたいと思います。

画像を配置。


先ほど述べた通り、Vectornatorやイラレを使って吹き出しを秒で作ります。

角丸長方形と三角を合わせて・・

パスファインダーで合体。




終わり。

◼︎ hukidasi.svg




サイズを調整、吹き出しには好きなセリフを入れて、アウトラインはお好みで設定してくださいね。

SVGで書き出しておきます。ファイル名は「hukidasi.svg」としました。

◼︎ kao.svg


顔のアイコン(kao.svg)の横に配置します。今回はflexを使いました。

◼︎ HTML

◼︎ CSS

.check { display:flex; width:80%; } .kao { width:25%; } .hukidasi { width:55%; }


◼︎ ブラウザ

これで配置は完了です。

回転と基準点。


CSSを使って要素を回転させるには、transformプロパティの値としてrotate( )を指定します。

transform : rotate(角度);

角度の値は「deg(度)」で記述することにします。正の値だと時計回りに、負の値だと反時計回りに回転します。

.hukidasi { width:55%; 「「1transform:rotate(90deg);」」 }

時計回りに90°回転しましたが。
…中心を基準に回転してしまっていますね。

回転軸を画像の左端に設定したい。それにはtransform-originというプロパティを使って「変形の基準点」を指定します。

transform-origin:(値)

値のデフォルトはcenter(中心)なのですが、これをleft(左端)に指定しましょう。

.hukidasi { width:55%; transform:rotate(90deg); 「「1transform-origin:left;」」 }

画像の左端を中心に、回転させる事ができました。

transformはまとめて書く。


今回は吹き出し部分が垂直から平行に回転し、なおかつ徐々にサイズが大きくなって、最後に等倍になる、というものにしたい。
したがってtransformの「scale」と「rotate」を使うのですが、ついついこのように書いてしまいそうです。

CSS

transform:scale(0); transform:rotate(90deg);

結果はこう成増。

◼︎ ブラウザ

「scale」は変わらず、後に書いた「rotate」しか、適用されていません。

〜transformもそれ自体がCSSのプロパティの1つです。
普通CSSに、

color:blue; color:red;

と記述すると、前に書いたblueはキャンセルされ、後に書いたredだけが適用されますよね。それと同じことが起こります。

transform:scale(0) rotate(90deg);

transformの値を複数指定する場合は、このようにまとめて記述するようにしましょう。

アニメーションさせましょう。


お待たせしました。それではアニメーションを仕込んでいきます。

◼︎ CSS

.hukidasi { width:55%; transform-origin:left; 「「1animation:check 2s infinite;」」 } @keyframes check { 0% { transform:scale(0) rotate(90deg); } 50% { transform:scale(1) rotate(0deg); } 100% { transform:scale(1) rotate(0deg); } }

アニメーション名を「check」、繰り返しは無限(infinite)としました。
継続時間は2s(秒)としています。
「時計方向に90°回転・スケール0」の状態から1秒間かけて回転・拡大し、完了した状態で1秒間停止します。

これで完成です。お疲れ様でした!
あとはサイズや余白などを調整して、サイトの彩りに役立ててください。

色んな吹き出しを取り入れよう。


最後までお読みいただき、ありがとうございました。
SVGアニメーションシリーズ。普段はSVG画像をインライン表記でHTMLに記述する方式をとっているのですが、今回はあえて参照表記・CSSのflexで配置する形をとりました。
コード内で参照する画像を書き換えるだけで、色んなバージョンを楽しめるからです。

〜皆さんもオリジナルの吹き出しを作って、楽しんでくださいね。ではまた〜 🎶



関連記事

要素が画面内に表示されたらアニメーション、Intersection
Observer。

2020.06.22
〽️ コピペで試してみてね。


SVGアニメーション06、アニメーションに合わせてテキストの色を反転。

2020.07.15
〽️ 3つの長方形を動かします。


SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。

2020.07.06
〽️ テキストの内部だけアニメーション。












「ふ」です。

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