CSS3アニメーションでつくるインターフェイス表現

第16回 並んで弾けるアニメーション

この記事を読むのに必要な時間:およそ 6 分

今回のお題は,水平に並べた要素に時間差で波紋のような弾けるアニメーションを加えるサンプル1)⁠Smooth Pulseのデザインとアニメーションをもとに,わかりやすく組み立て直した。アニメーションの工夫があるものの,技術的にはむずかしくない。ただ,要素の数だけアニメーションのコードが増える。jsdo.itのスペースも考え合わせて,要素の数は4つに減らした。

サンプル1 CSS3: Smooth Pulse

水平に並べた要素に静的なスタイルを割り当てる

アニメーションを加える前の,4つの要素の組み立てと静的なスタイルは,後に掲げるコード1のとおりだ。border-radiusプロパティの値を50%にして,要素は円形にした。そして,色は緑系(#33ffff)から青系(#3399ff)まで,段階的に変えている図1)⁠アニメーションは,円形の<a>要素class属性"circle")に加えてゆく。なお,おなじみの-prefix-freeは,CDNがあったのでそれを用いた。

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>

図1 水平に並べた要素の静的スタイル

図1 水平に並べた要素の静的スタイル

コード1 並べた要素に割り当てた静的なスタイル
<body>要素

<div id="container">
    <a href="#" class="circle"></a>
    <a href="#" class="circle"></a>
    <a href="#" class="circle"></a>
    <a href="#" class="circle"></a>
</div>

<style>要素

html {
    background: #333;
}
#container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -160px;
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    float: left;
}
.circle:nth-child(n+2) {
    margin-left: 80px;
}
.circle:nth-child(1) {
    background: #33ffff;
}
.circle:nth-child(2) {
    background: #33ddff;
}
.circle:nth-child(3) {
    background: #33bbff;
}
.circle:nth-child(4) {
    background: #3399ff;
}

並べた要素に弾けるようなアニメーションを加える

円形の<a>要素class属性"circle")に加えるアニメーションは,4つで少しずつ異なる。それらをすべて羅列したのでは,共通する基本部分がわかりにくい。そこで,違うところは以下のように変数を使って示すことにした。変数nは要素の順番(1~4)だ。redgreenおよびblueは,要素ごとの色backgroundによって決まる。そして,delayは要素によって変えるアニメーション開始の時間差だ。あとは,すべて共通となる。

@keyframes規則の構成は大枠として,3つの影box-shadowプロパティ)を3つのキーフレーム(0%と10%および100%)でアニメーションanimationプロパティ)させることになる。ひとつめと3つめの影は同じ色で,それぞれの要素と同系色にする。ひとつめの影は要素から広がる光彩で,透明から輝きを増し,透明に戻ることで,瞬くように見せる。3つめは,大きさを広げながら強さを増し,さらに広がりつつ消えてゆく。隠し味は,ふたつめの背景色の影だ。こちらは不透明なまま,3つめの影に少し遅れて広がる。この影がふたつの間を埋めることによって,波紋のような弾けるアニメーションになった図2)⁠ここまでのCSSの定めを,以下のコード2にまとめた。

.circle:nth-child(n) {

    animation: pulse_n 2s delay ease-out infinite;
}
@keyframes pulse_n {
    0% {
        box-shadow: 0 0 8px 6px rgba(red, green, blue, 0),
            0 0 0px 0px #333,
            0 0 0px 0px rgba(red, green, blue, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px rgba(red, green, blue, 1),
            0 0 12px 10px #333,
            0 0 12px 14px rgba(red, green, blue, 1);
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(red, green, blue, 0),
            0 0 0px 40px #333,
            0 0 0px 40px rgba(red, green, blue, 0);
    }
}

図2 並んだ要素に順に波紋のような弾けるアニメーションが加わった

図2 並んだ要素に順に波紋のような弾けるアニメーションが加わった

コード2 要素を順に弾けるようにアニメーションさせる

html {
    background: #333;
}
#container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -160px;
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    float: left;
}
.circle:nth-child(n+2) {
    margin-left: 80px;
}
.circle:nth-child(1) {
    background: #33ffff;
    animation: pulse_1 2s 0s ease-out infinite;
}
@keyframes pulse_1 {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0),
            0 0 0px 0px #333,
            0 0 0px 0px rgba(26, 255, 255, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 255, 1),
            0 0 12px 10px #333,
            0 0 12px 14px rgba(26, 255, 255, 1);
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 255, 0),
            0 0 0px 40px #333,
            0 0 0px 40px rgba(26, 255, 255, 0);
    }
}
.circle:nth-child(2) {
    background: #33ddff;
    animation: pulse_2 2s 0.25s ease-out infinite;
}
@keyframes pulse_2 {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0),
            0 0 0px 0px #333,
            0 0 0px 0px rgba(26, 217, 255, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px rgba(26, 217, 255, 1),
            0 0 12px 10px #333,
            0 0 12px 14px rgba(26, 217, 255, 1);
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(26, 217, 255, 0),
            0 0 0px 40px #333,
            0 0 0px 40px rgba(26, 217, 255, 0);
    }
}
.circle:nth-child(3) {
    background: #33bbff;
    animation: pulse_3 2s 0.5s ease-out infinite;
}
@keyframes pulse_3 {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0),
            0 0 0px 0px #333,
            0 0 0px 0px rgba(26, 179, 255, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px rgba(26, 179, 255, 1),
            0 0 12px 10px #333,
            0 0 12px 14px rgba(26, 179, 255, 1);
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(26, 179, 255, 0),
            0 0 0px 40px #333,
            0 0 0px 40px rgba(26, 179, 255, 0);
    }
}
.circle:nth-child(4) {
    background: #3399ff;
    animation: pulse_4 2s 0.75s ease-out infinite;
}
@keyframes pulse_4 {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0),
            0 0 0px 0px #333,
            0 0 0px 0px rgba(26, 140, 255, 0);
    }
    10% {
        box-shadow: 0 0 8px 6px rgba(26, 140, 255, 1),
            0 0 12px 10px #333,
            0 0 12px 14px rgba(26, 140, 255, 1);
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(26, 140, 255, 0),
            0 0 0px 40px #333,
            0 0 0px 40px rgba(26, 140, 255, 0);
    }
}

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入