こんにちは、素人エンジニアです。

cssだけで、桜の花びらが散るアニメーションを作りました。

コピペで使ってくださいな。

さくらひらひら

↓HTMLとCSSをクリックするとコードが表示されます。

See the Pen さくらひらひら by amateur-engineer (@amaeng) on CodePen.

花びらの形や、左右に揺れながら落ちるアニメーションについてはこちらの記事で解説しています。

この記事の葉っぱの色をピンクにすると、桜へ大変身します！

今回は特別に、桜の花びらの舞台裏もお見せします。
borderの上に配置した花びらが、枠外の範囲までひらひら落ちていくようになっています。

舞台裏を見せちゃうぞ

アニメーションの再生回数は無限にしています。
背景などに使うといい感じになるかもしれませんね。

ぜひ、参考にしてください。