STAFF BLOGスタッフブログ

舞い散る桜の花びらアニメーション【HTML/CSS】

2021/03/29 HTML/CSS

こんにちわ!最近花粉の気配を感じ始めましたね・・・。

なんだかんだでもう3月に入りましたが、もう少しで桜の季節です!
ということで、HTMLとCSSで桜の花びらが舞い散るアニメーションを作ってみました。

用意するもの

●桜の花びら画像(png)

桜の花びら画像を7枚( 7パターン)用意しました。

出来上がりがこちら

See the Pen GRNYVxq by adatype (@adatype) on CodePen.

出来上がったものがこちらになります。

コードの内容については下記をご覧ください。

HTML

まず#sakura_blockの中に花びら画像たちをまとめる.sakura_parts_boxを作って、 中に先ほど用意した花びら画像たちを入れて、それぞれクラスを付けます。
用意した画像は7枚ですが、画面幅いっぱいに桜を降らようと配置したら中の画像が19枚になりました。枚数は降らせたい場所のサイズに合わせて調整してください。

<div id="sakura_block">
    <div class="sakura_parts_box">
        <img src="img/parts_01.png" alt="" class="parts_01">
        <img src="img/parts_02.png" alt="" class="parts_02">
        <img src="img/parts_03.png" alt="" class="parts_03">
        <img src="img/parts_04.png" alt="" class="parts_04">
        <img src="img/parts_05.png" alt="" class="parts_05">
        <img src="img/parts_06.png" alt="" class="parts_06">
        <img src="img/parts_07.png" alt="" class="parts_07">
        <img src="img/parts_01.png" alt="" class="parts_08">
        <img src="img/parts_02.png" alt="" class="parts_09">
        <img src="img/parts_03.png" alt="" class="parts_10">
        <img src="img/parts_04.png" alt="" class="parts_11">
        <img src="img/parts_05.png" alt="" class="parts_12">
        <img src="img/parts_06.png" alt="" class="parts_13">
        <img src="img/parts_07.png" alt="" class="parts_14">
        <img src="img/parts_01.png" alt="" class="parts_15">
        <img src="img/parts_02.png" alt="" class="parts_16">
        <img src="img/parts_03.png" alt="" class="parts_17">
        <img src="img/parts_04.png" alt="" class="parts_18">
        <img src="img/parts_05.png" alt="" class="parts_19">
    </div>
</div>

CSS

CSSが長いですが、ざっくり指定したことを説明すると

  • 1.降らせたい箇所に地味にひとつずつ桜の花びらを配置する
  • 2.どんな風に降らせるかのアニメーションの指定をする
  • 3.アニメーションが始まるまでの時間指定をする

といった感じになります。

1.降らせたい箇所に地味にひとつずつ桜の花びらを配置する
/*-----------------------------------
sakura_block
-----------------------------------*/
#sakura_block{
  width: 100%;
}
#sakura_block .sakura_parts_box{
  position: relative;
}
#sakura_block .sakura_parts_box img{
  position: absolute;
}
#sakura_block .sakura_parts_box img:nth-child(2n+1){
  width: 13px;/*花びらのサイズ*/
}
#sakura_block .sakura_parts_box img:nth-child(2n){
  width: 15px;/*花びらのサイズ*/
}

大枠#sakura_blockに対してwidth: 100%;を指定しました。
ここは桜を降らせたい箇所のサイズを入れます。

その中に画像たちをまとめる親のdivを作成し、position: relative;とします。
中にimgタグで入れた花びらの画像たちにposition: absolute;を追加し、 それぞれ位置を調整していきます。
花びら画像に幅13pxと15pxの2サイズを指定をしました。

/*-----------------------------------
桜の花びらパーツの表示位置
-----------------------------------*/
img.parts_01{top: 0; left: 5%;}
img.parts_02{top: 0; left: 12%;}
img.parts_03{top: 0; left: 15%;}
img.parts_04{top: 0; left: 22%;}
img.parts_05{top: 0; left: 25%;}
img.parts_06{top: 0; left: 28%;}
img.parts_07{top: 0; left: 35%;}
img.parts_08{top: 0; left: 40%;}
img.parts_09{top: 0; left: 43%;}
img.parts_10{top: 0; left: 50%;}
img.parts_11{top: 0; left: 55%;}
img.parts_12{top: 0; left: 60%;}
img.parts_13{top: 0; left: 63%;}
img.parts_14{top: 0; left: 70%;}
img.parts_15{top: 0; left: 75%;}
img.parts_16{top: 0; left: 81%;}
img.parts_17{top: 0; left: 85%;}
img.parts_18{top: 0; left: 90%;}
img.parts_19{top: 0; left: 93%;}

ここで先ほどposition: absolute;にしておいた 一つ一つの花びらの位置を調整してあげます。 等間隔で配置するよりかはちょっとランダム気味にしたほうが より自然に見えると思います。

2.どんな風に降らせるかのアニメーションの指定をする
/*-----------------------------------c
舞い散るアニメーション
どんな風に降らせるかのアニメーションの指定をする
-----------------------------------*/
@keyframes sakura {
    0% {
      opacity: 0;
    }
    20% {
      transform:translate(3px,30px) rotate(20deg);
      opacity: 1;
    }
    30% {
      transform:translate(0,50px) rotate(50deg);
    }
    50% {
      transform:translate(-20px,100px)  rotate(150deg);
    }
    70% {
      transform:translate(-40px,150px) rotate(-50deg);
      opacity: .8;
    }
    90% {
      transform:translate(-60px,200px) rotate(-180deg);
    }
    100% {
      transform:translate(-70px,230px);
      opacity: 0;
    }
}

.sakura_parts_box img {
    animation: sakura linear 6s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

animationプロパティを使って、どんなふうに舞い散らせるかを指定します。 @keyframesの中に、アニメーションの内容を記述します。 アニメーションの名前はsakuraとして、 0%~100%までtranslateで花びらを上から下へ移動させつつ、 rotateで花びらの回転もプラスしました。 動き方を確認しながら微調整を繰り返します。 ポイントは、下記の「opacity: 0;」です。

.sakura_parts_box img {
    animation: sakura linear 6s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

これをいれないと、白背景に最初から花びら画像が表示されているので、 花びらがボロボロ落ちてくるようなアニメーションが出来上がります・・・。 (liniarをeaseにすると花びらがアメンボのような動きをします笑 お暇な方はやってみてください!)

3.アニメーションが始まるまでの時間指定をする
/*-----------------------------------
アニメーションが始まるまでの時間
-----------------------------------*/
img.parts_01,img.parts_04,img.parts_07,img.parts_10,img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
img.parts_02,img.parts_05{
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
img.parts_03,img.parts_06,img.parts_09,img.parts_12{
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
img.parts_14,img.parts_17{
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
img.parts_15,img.parts_18{
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

花びら画像それぞれでアニメーションが始まるまでの時間をずらして指定します。 そうすると、花びらが時間差でハラハラと降ってくる感じになります。

長くなりましたがCSSは以上です。

まとめ

今回はHTML・CSSで桜の花びらが舞い散るアニメーションを作ってみました。
微調整を繰り返すうちについついコードが長くなるので、後で見返したときに(o゜ー゜o)???とならないようにコメントを残しておくのが良いですね・・! 次はJavascriptバージョンにも挑戦してみたいと思います。

最後までお読みいただき、ありがとうございました!

この記事を書いた人

SNSのシェアはこちらから

アド・エータイプに、
相談してみませんか?

無料お見積り・お問い合わせなど、
お気軽にご相談ください。

ページ上部へ