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

画像を配置。

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

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

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

終わり。

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

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

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

これで配置は完了です。

回転と基準点。

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

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

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

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

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

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

transformはまとめて書く。

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

結果はこう成増。

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

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

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

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

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

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

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

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

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

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

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