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

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

CSS, アニメーション

この記事を読むのに必要な時間：およそ 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）だ。redとgreenおよび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);
    }
}

CSS, アニメーション

著者プロフィール

野中文雄（のなかふみお）

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

URL：http://www.FumioNonaka.com/

著書