CSS3 Generator

CSS3（sass使用）とJavascriptで泡のアニメーションをつくる

PREVIEW

Items　

1. CSSで気泡を再現

HTML

<div class="field">
    <div class="item"></div>
</div>

CSS

.field {
    background: #86c6e0;
    overflow: hidden;
    position: relative;
    height: 300px;
}
.item {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
    position: relative;
}
.item:after {
    content: "";
    display: block;
    width: 20%;
    height: 20%;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    right: 15%;
    top: 15%;
    filter: blur(2px);
    -webkit-filter: blur(2px);
    transform: rotateZ(45deg) scaleY(0.8);
    -webkit-transform: rotateZ(45deg) scaleY(0.8);
}

PREVIEW

2. 気泡を左右にゆらゆら

class="shake"を追加し、@keyframesとanimationを用いアニメーションをセッティングします。

HTML

<div class="field">
    <div class="item shake"></div>
</div>

CSS

/*animation Setting*/
@keyframes shake {
    0% { transform: translateX(10px); }
    50% { transform: translateX(-10px); }
    100% { transform: translateX(10px); }
}
@-webkit-keyframes shake {
    0% { -webkit-transform: translateX(10px); }
    50% { -webkit-transform: translateX(-10px); }
    100% { -webkit-transform: translateX(10px); }
}

/*animation Play*/
.shake {
    animation: shake 2s ease 0s infinite normal;
    -webkit-animation: shake 2s ease 0s infinite normal;
}

PREVIEW

左右にらゆら

3. 下から上に浮き上がらせる

ここで気泡の大きさをちょっと小さくします。
class="move"を付加したdiv要素で囲い、同じようにアニメーションをセッティングします。translateYの値は任意で変更してさい。
同時に、absoluteでスタートの位置を下に設定します。

HTML

<div class="field">
    <div class="move"><div class="item shake"></div></div>
</div>

CSS

/*animation Setting*/
@keyframes move {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-1000px); opacity: 0; }
}
@-webkit-keyframes move {
    0% { -webkit-transform: translateY(0px); }
    100% { -webkit-transform: translateY(-1000px); opacity: 0; }
}

/*animation Play*/
.move {
    animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;
    -webkit-animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;

    position: absolute;
    bottom: -10%;
    left: 50%;
}

PREVIEW

これで左右にゆらゆらしながら浮き上がるようになりました。

4. sassを使ってアニメーションの再生パターンをさくっと用意する

duration、delayを調整しパターンを量産します。
自力で数十パターン用意してもいいですが、面倒くさいので、、、ここで登場sass！
forを使って一気に量産！

CSS

/*animation Play*/
@for $i from 0 through 50 {
    $time: $i*0.2;
    $scale: $i*0.1;

    .shake#{$i * 1} {
        animation: shake ($time+2)+s ease 0s infinite normal;
        -webkit-animation: shake ($time+2)+s ease 0s infinite normal;
    }
    .move#{$i * 1}  {
        animation: move ($time+5)+s $b_ease $time+s infinite normal;
        -webkit-animation: move ($time+5)+s $b_ease $time+s infinite normal;

        position: absolute;
        bottom: -10%;
    }
    .pos#{$i * 1}  {
        left: percentage($i*2/100);
    }
    .scale#{$i * 1}  {
        transform: scale($scale);
        -webkit-transform: scale($scale);
    }
}

さくっと50パターン出来上がりました。
ついでに、ランダムに配置するための".pos"、大きさを調整する".scale"を用意しておきます。

5. Javascriptで量産

先ほど用意した各パターンをランダムに設置し、気泡を量産していきます。
自力で設置してもいいですが、ここはJavascriptで。

HTML

field内をからにします。

<div class="field">

</div>

JavaScript

forで回してfield内にがんがん量産！
その際に乱数を用いて各クラスをランダムに設置します。

var items = 30;//気泡の個数

for (var i=0; i<=items; i++) {
    var moveVal = Math.ceil( Math.random()*50 );
    var posVal = Math.ceil( Math.random()*50 );
    var scaleVal = Math.ceil( Math.random()*10 );
    var shakeVal = Math.ceil( Math.random()*5 );
    $(".field").append('<div class="move'+moveVal+' pos'+posVal+'"><div class="scale'+scaleVal+'"><div class="item shake'+shakeVal+'"></div></div>');
}

出力イメージ

<div class="field">
    <div class="move46 pos27"><div class="scale10"><div class="item shake2"></div></div></div>
    <div class="move12 pos49"><div class="scale8"><div class="item shake1"></div></div></div>
    ...
    ...
</div>

完成！

↓ Zip Download