アニメーションを作る

こんにちは！

マーケティング部受託プロダクトチームのインターン生、村高歩夢です！

今回はCSSのアニメーションで面白いものがあったので実装してみようと思います！

僕CSSのアニメーションがあまり得意ではないんです！

CSSのアニメーションって

position: absolute;

というプロパティを多用するんですが、こいつちょっといじるとすぐ頭でっかちになったり、おしりでっかちになったりするどうしようもねぇやつなんでやんす。

で、しまいには爆発するんですよ。

K松3歩先！

わかったでやんs

ブウゥゥゥゥウン

ということでこいつに同情するのではなく、練習することにしました。

今回実装したのはコーヒーカップと湯気のアニメーションです。

アニメーションは湯気だけなのでコーヒーカップの説明は割愛します。

この実装の概要は

1, HTMLで四角い空間(要素)を作る

2, その要素をCSSで装飾、

具体的には

煙みたいなモヤモヤ感

上に登っていくアニメーション

最初徐々に煙が現れ、最後透明になっていくアニメーション

徐々に広がっていくアニメーション

3, 要素をバラバラにする

3に関しては理解しやすいように分けているだけであって実際には1と一緒にやっちゃいます。

ではいきましょうか

1,HTMLで四角い空間(要素)を作る

---

左から順番に

<span style=“—I:1;”></span>

<span style=“—I:2;”></span>

<span>style=“—I:3;”></span>

　　　　　⁞

<span stlyle=“—I:20;></span>

とstyleの中の数値が順番になるように配置します。

ある程度CSSを整えた図がこちら

2,要素をCSSで装飾

---

CSSを煙のように変えていきます。

○煙みたいなモヤモヤ感

右下の

filter: blur(8px);

上記のプロパティを利用して

要素をモヤっとします。

その画像がこちら

じゃあ後のアニメーションは動画で一気にいきます！

こちらのtwitterに動画挙げましたので見てください

アニメーションの動作は@keyframesを使って

animateという関数の中にまとめておきます

ここで動画の中の”%”はアニメーションの時間のある地点です。

0%開始地点、100%は終了地点を指します。

○上に登っていくアニメーション

translateY()を使って上に移動していきます。

○最初徐々に煙が現れ、最後透明になっていくアニメーション

opacityを使います

○徐々に広がっていくアニメーション

scaleX()を使います

○各要素を番号×0.5秒ずらす

animation-delayを使います。

3, 要素をバラバラにする

---

今、煙は番号順に登っていきます。

煙はもっと不規則ですので、煙要素の順番を変更します。

完成です！

かなりあったかそうなTEAなんじゃあないですか？

課題としては煙のした部分がちょっと不自然なままだったところですかね。

対策としては

煙要素を二重に重ねることで煙が登っても空洞ができないようにするとかでしょうか。

はい！以上！

position: absolute;

についてもっと触れるべきだったかも？

参考サイト(というか丸パクリ)

---

■ガーディアン主力ソリューション→OWLet

■新サービスリリースのお知らせ

WEB業界を変える！育てて成果を上げるサブスク型HPサービス

→SCSC (スクスク)

ガーディアンのインターン制度→こちら

村高歩夢の紹介ページ→こちら