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

2021/03/29 HTML/CSS

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

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

用意するもの

●桜の花びら画像(png)

桜の花びら画像を７枚( 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;を追加し、それぞれ位置を調整していきます。
花びら画像に幅13ｐｘと15ｐｘの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は以上です。