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

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

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

ポインタが重なったときのアニメーションを加える

要素にマウスポインタが重なったときには,アニメーションを変えよう。基本は前項で加えた弾けるアニメーションと同じだ。それも,つぎのように少し簡潔になる。ポインタが重なった要素のみに与えるアニメーションだから,時間差は変えない。@keyframes規則のキーフレームはふたつで済ませている。要素に応じて色を定めた3つの影のアニメーションは,前項と同じ考え方だ。これで,マウスポインタを重ねた要素の色とアニメーションが変わる図3)⁠

.circle:nth-child(n):hover {

    animation: hover_n 0.5s 0.4s ease-out infinite;
}

@keyframes hover_n {
    from {
        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);
    }
    to {
        box-shadow: 0 0 8px 6px rgba(red, green, blue, 0),
            0 0 4px 40px #333,
            0 0 4px 41px rgba(red, green, blue, 0);
    }
}

図3 マウスポインタを重ねるとアニメーションが変わる

図3 マウスポインタを重ねるとアニメーションが変わる

細かいけれど,要素にはtransitionプロパティも加えたので,マウスポインタを重ねたときの色は滑らかに切り替わる。なお,アニメーションの時間差は,要素同士の同期はとっていない。そのため,マウスポインタを重ねてアニメーションが切り替わると,他の要素とのタイミングはずれてしまう。できあがったCSSの定めは,以下のコード3にまとめた。要素の数に加え,それぞれの:hover擬似クラスにもアニメーションを定めたことにより,コードの行数は増えてしまった。だが,これまで解説した基本の考え方がわかれば,むずかしいことはないだろう。

.circle {

    transition: 0.5s;
}

コード3 ポインタが重なったときの動きも加えた波紋のように弾むアニメーション

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;
    transition: 0.5s;
}
.circle:nth-child(n+2) {
    margin-left: 80px;
}
.circle:nth-child(1) {
    background: #33ffff;
    animation: pulse_1 2s 0s ease-out infinite;
}
.circle:nth-child(1):hover {
    background: #ff3333;
    animation: hover_1 0.5s 0.4s 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);
    }
}
@keyframes hover_1 {
    from {
        box-shadow: 0 0 8px 6px rgba(255, 26, 26, 1),
            0 0 12px 10px #333,
            0 0 12px 14px rgba(255, 26, 26, 1);
    }
    to {
        box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0),
            0 0 4px 40px #333,
            0 0 4px 41px rgba(255, 26, 26, 0);
    }
}
.circle:nth-child(2) {
    background: #33ddff;
    animation: pulse_2 2s 0.25s ease-out infinite;
}
.circle:nth-child(2):hover {
    background: #ff4733;
    animation: hover_2 0.5s 0.4s 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);
    }
}
@keyframes hover_2 {
    from {
        box-shadow: 0 0 8px 6px rgba(255, 48, 26, 1),
            0 0 12px 10px #333,
            0 0 12px 14px rgba(255, 48, 26, 1);
    }
    to {
        box-shadow: 0 0 8px 6px rgba(255, 48, 26, 0),
            0 0 4px 40px #333,
            0 0 4px 41px rgba(255, 48, 26, 0);
    }
}
.circle:nth-child(3) {
    background: #33bbff;
    animation: pulse_3 2s 0.5s ease-out infinite;
}
.circle:nth-child(3):hover {
    background: #ff5c33;
    animation: hover_3 0.5s 0.4s 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);
    }
}
@keyframes hover_3 {
    from {
        box-shadow: 0 0 8px 6px rgba(255, 71, 26, 1),
            0 0 12px 10px #333,
            0 0 12px 14px rgba(255, 71, 26, 1);
    }
    to {
        box-shadow: 0 0 8px 6px rgba(255, 71, 26, 0),
            0 0 4px 40px #333,
            0 0 4px 41px rgba(255, 71, 26, 0);
    }
}
.circle:nth-child(4) {
    background: #3399ff;
    animation: pulse_4 2s 0.75s ease-out infinite;
}
.circle:nth-child(4):hover {
    background: #ff7033;
    animation: hover_4 0.5s 0.4s 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);
    }
}
@keyframes hover_4 {
    from {
        box-shadow: 0 0 8px 6px rgba(255, 94, 26, 1),
            0 0 12px 10px #333,
            0 0 12px 14px rgba(255, 94, 26, 1);
    }
    to {
        box-shadow: 0 0 8px 6px rgba(255, 94, 26, 0),
            0 0 4px 40px #333,
            0 0 4px 41px rgba(255, 94, 26, 0);
    }
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入