今すぐ誰でもCSSアニメーション -波打つグラデーション-
前はGIFアニメやJavascriptを使って頑張って実装していた（らしい）ものも最近はCSSだけで実装するのが主流になってきています。
ただ、普段コーディングをしないWebデザイナーさんや勉強し始めたばかりのエンジニアさんは取っ掛かりにくい部分もあるかと思いますので、簡単に手元で試せるサンプルコードと解説を載せたいと思います。
アニメーション
できるとちょっと格好いい「波打つグラデーション」です。
解説
まず、構成として大きく3つのパーツでできています。
①：表示するエリアの外枠
②：①内に重ねて表示するエリア
③：ゆらゆら揺れるアニメーション部分
これをHTMLで以下のように定義しています。
<body>
<div class="box"> ← ①
<div class="wave -one"></div> ← ③-1
<div class="wave -two"></div> ← ③-2
<div class="wave -three"></div> ← ③-3
<div class="title">wavey</div> ← ②
</div>
</body>①、②は枠の大きさや表示位置・色などを定義しているだけなので、想像がつきやすいかと思いますが、③のアニメーションはもう少し複雑です。
3色のレイヤー（③-1、③-2、③-3）を重ねて、アニメーションの時間をずらして動かしています。
上の図を見ると分かるかもしれませんが、大きさ・形・アニメーション方法は同じで色とアニメーション時間だけ異なります。
CSSで見てみると下のようになります。
.waveが③の3つのレイヤーで共通のスタイルで、.-two、.-threeでそれぞれ異なるアニメーション時間を設定しています。
アニメーションの動き自体は@keyframesで定義しています。
ここから先は
3,551字
¥ 500
読んでくださりありがとうございます。サポートいただいたお金はデザインの勉強に使いたいと思います。