CSS3のanimationで春うららかな桜を降らせてみた（雨にも雪にもなる！）

どうもですよ、はやちですよ✌(´ʘ‿ʘ｀)✌

めっきり春ですね、ほかほかして春はなんとなくねむいです( ˘ω˘)ｸｿﾈﾐ
花を見に散歩したいところですが買い込んだゲームをクリアしなきゃいけないので、もうしばらくインドア生活になりそうです( ˘ω˘)

そんなのはどうでもいいですね。
今回は春らしくCSS3のanimationで桜を降らしてみようと思います( ˘ω˘)☝

実装方法

それでは実装方法をご紹介いたします( ˘ω˘)☝

画像の用意

まずは降らせる用の桜の画像を用意します。
今回はこんな感じなの用意しました( ˘ω˘)☞

html

マークアップはこのようになります。
降らせたい桜には、あらかじめdivを複数用意します( ˘ω˘)☝

<section id="sakura">
    <div class="inner">
        <div class="flake1"></div>
        <div class="flake2"></div>
        <div class="flake3"></div>
        <div class="flake4"></div>
        <div class="flake5"></div>
        <div class="flake6"></div>
        <div class="flake7"></div>
        <div class="flake8"></div>
        <h2>Sakura</h2>
    </div>
</section>

css

設定しているスタイルをご紹介します( ˘ω˘)☝

アニメーションの初期設定

動かす前のアニメーションを設定します( ˘ω˘)☝

section .inner div {
    opacity: 0;
    -webkit-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    transform-origin: 0px 0px;
    -webkit-animation-name: Drop;
    animation-name: Drop;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

桜の設定

桜を設定します。
一部のdivはbackground-sizeで小さくしてあげるとより遠近感がでます( ˘ω˘)☝

#sakura .inner div {
    position: absolute;
    display: block;
    width: 10px;
    height: 15px;
    background: url("../../images/sakura.png") no-repeat;
}

#sakura .inner div.flake2,
#sakura .inner div.flake4,
#sakura .inner div.flake6,
#sakura .inner div.flake8 {
    background-size: 5px 6px !important;
}

表示位置とアニメーションの時間を設定

桜の表示位置とスタートする時間を設定してあげます( ˘ω˘)☝

.flake1 {
    left: 20px;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
}

.flake2 {
    left: 40px;
    -webkit-animation-duration: 2.7s;
    animation-duration: 2.7s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.flake3 {
    left: 60px;
    -webkit-animation-duration: 2.9s;
    animation-duration: 2.9s;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.flake4 {
    left: 80px;
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.flake5 {
    left: 100px;
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.flake6 {
    left: 150px;
    -webkit-animation-duration: 2.2s;
    animation-duration: 2.2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.flake7 {
    left: 170px;
    -webkit-animation-duration: 2.7s;
    animation-duration: 2.7s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.flake8 {
    left: 200px;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

アニメーションの設定

keyframesでアニメーションを設定してあげます。
0px〜100pxの縦の動きとopacityの値を定義してあげます( ˘ω˘)☝

@-webkit-keyframes Drop {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0.3;
    }
}

@keyframes Drop {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0.3;
    }
}

これで完成になります！！
＼＼\\٩(´ʘ‿ʘ｀)و //／／

ちなみに

先ほどの桜を設定した部分ですが、背景色を変えて円に設定してあげると雪になります( ˘ω˘)☝

#snow .inner div {
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 2.5px;
    background: #fff;
}

実装したものはこちらで確認いただけます( ˘ω˘)☞三☞ｼｭｯｼｭｯ

DEMO

まとめ

いかがでしたでしょうか？
はじめはJSで実装を試みたのですが、仕組みが難しかったのでCSS3で実装したところカンタンにできました。
CSS3 animationはすごく使いやすいですね。これを使って秋なら紅葉、梅雨の時期なら雨を降らすなどカスタマイズしてあげるのもいいですね( ˘ω˘)☝

ではではこのへんで。

【CSS3にまつわるエトセトラ】

※ keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法

※ スマホ対策に！CSS3追加セレクタと疑似クラスの書き方サンプル

※ 今すぐ試してみたくなる！CSS3やjQueryで実装できるリッチなエフェクト6選

※ JavaScriptで制御しているCSS3のtransitionを途中で中断させる方法