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

第18回　飛び出す数字のアニメーション

CSS, アニメーション

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

マウスポインタを重ねた項目に数字を示す

つぎは，今回の肝となる数字，インターフェイスではバッジと呼ばれる部品だ。つぎのように，data-グローバル属性（data-bubble）の与えられた<a>要素を属性セレクタ[]で選んで，::after擬似要素を加える。表示する数字は，前述のとおりdata-グローバル属性からattr()式でcontentプロパティに与えた。border-radiusプロパティで背景の角に丸みをつけ，文字と角丸背景にそれぞれ影を加えている。これが，インタラクションを加える前の数字（バッジ）のスタイルになる（図3⁠）⁠。

.menu a[data-bubble]:after {
    content: attr(data-bubble);
    position: absolute;
    top: 0;
    right: 0.5em;
    line-height: 1.5em;
    padding: 0 0.46em;
    text-shadow: 0 0.063em 0 rgba(0, 0, 0, 0.2);
    background-color: #eee;
    color: #364652;
    box-shadow: 0 0.063em 0.063em rgba(0, 0, 0, 0.2);
    border-radius: 4em;
}

図3　擬似要素で数字を示す

図3　擬似要素で数字を示す

擬似要素（::after）の数字に，つぎのような基本的なインタラクションを加える。z-indexプロパティで，初めはメニューバーの背後に隠しておく（-1⁠）⁠。マウスポインタを重ねたら（:hoverと:activeおよび:focus）手前に出し（1⁠）⁠，topプロパティで上に持ち上げた（※1⁠）⁠。これで，マウスポインタを重ねたメニュー項目には，数字が示されることになる（図4⁠）⁠。ここまでのCSSの定めを，以下のコード2にまとめておこう。

.menu a[data-bubble]::after {

    z-index: -1;
    transform: translateZ(0);
}
.menu a:hover[data-bubble]::after,
.menu a:active[data-bubble]::after,
.menu a:focus[data-bubble]::after {
    top: -1.25em;
    z-index: 1;
}

図4　マウスポインタを重ねたメニュー項目に数字が示される

図4　マウスポインタを重ねたメニュー項目に数字が示される

コード2　マウスポインタを重ねると数字が示されるメニューバー

body {
    padding: 1em 2em;
    font: 100%/1.5 "Helvetica Neue", sans-serif;
    color: #eee; 
    background: #485258;
}
.menu {
    display: inline-block;
    box-shadow: 0.12em 0.12em 0 rgba(40, 40, 40, 0.2);
    list-style-type: none;
    padding: 0;
}
.menu li {
    float:left;
    border-left:0.063em solid #a6c6cd;
    border-right:0.063em solid #6ca1ac;
}
.menu a {
    display: block;
    padding: 0 1em;
    line-height: 2.5em;
    position:relative;
    font-weight: bold;
    text-decoration: none;
    color: #364652;
    background-color: #86B2BB;
    text-shadow: 0 0.063em 0 #a6c6cd;
}
.menu a:hover,
.menu a:active,
.menu a:focus {
    color: #eee;
    text-shadow: 0.063em 0.063em 0 #547177;
}
.menu a[data-bubble]::after {
    content: attr(data-bubble);
    position: absolute;
    top: 0;
    right: 0.5em;
    line-height: 1.5em;
    padding: 0 0.46em;
    text-shadow: 0 0.063em 0 rgba(0, 0, 0, 0.2);
    background-color: #eee;
    color: #364652;
    box-shadow: 0 0.063em 0.063em rgba(0, 0, 0, 0.2);
    border-radius: 4em;
    z-index: -1;
    transform: translateZ(0);
}
.menu a:hover[data-bubble]::after,
.menu a:active[data-bubble]::after,
.menu a:focus[data-bubble]::after {
    top: -1.25em;
    z-index: 1;
}
※1）
z-indexをマイナスからプラスに切り替えたとき，環境によっては背景がちらつく。transformプロパティでtranslateZ()関数を定めたのは，それを避けるための記述だ。
.menu a[data-bubble]::after {

    transform: translateZ(0);
}

数字に飛び出すようなアニメーションを加える

いよいよ数字の擬似要素に，飛び出すようなアニメーションを加えて仕上げよう。animationプロパティと@keyframes規則を以下のように加える。これらの定めだけ見ると，transformプロパティでtranslateY()関数により，垂直位置を上げ下げしているだけと捉えるかもしれない。しかも，アニメーションの終わる位置は，始まりより下がる。しかし，@keyframes規則をよくよく眺めると，topプロパティが含まれている。この値は，マウスポインタを重ねたとき（:hoverと:activeおよび:focus⁠）⁠ ，少し上に持ち上げられているのだ。表1のようにこれらが組み合わさって，バーの裏から飛び出して，半分持ち上がった位置に降りるアニメーションになっている。なお，animation-fill-modeプロパティはbothとした。

表1　数字要素の垂直位置のアニメーション

キーフレームtransformtop
0%00
50%-12px-
100%6px-1.25em
.menu a:hover[data-bubble]::after,
.menu a:active[data-bubble]::after,
.menu a:focus[data-bubble]::after {
    animation: bubbleover 0.4s;
    animation-fill-mode: both;
    top: -1.25em;
    z-index: 1;
}
@keyframes bubbleover {
    0%   {
        top: 0;
        transform: translateY(0);
        z-index: -1;
    }
    50% {
        transform: translateY(-12px);
        z-index: -1
    } 
    100% {
        transform: translateY(6px);
        z-index: 1;
    }
}

あとおまけとして，3つめのメニュー項目（class属性"gold"）だけ数字の背景色が違う。CSSには以下の定めが加えてある。書き上がったCSSの記述は，以下のコード3にまとめたとおりだ。

<ul class="menu">

    <li><a class="gold" href="#" data-bubble="1">Hidden Coins</a></li>
</ul>

a.gold[data-bubble]::after {
    background-color: gold;
}

コード3　マウスポインタを重ねると数字が飛び出すメニューバー

body {
    padding: 1em 2em;
    font: 100%/1.5 "Helvetica Neue", sans-serif;
    color: #eee; 
    background: #485258;
}
.menu {
    display: inline-block;
    box-shadow: 0.12em 0.12em 0 rgba(40, 40, 40, 0.2);
    list-style-type: none;
    padding: 0;
}
.menu li {
    float:left;
    border-left:0.063em solid #a6c6cd;
    border-right:0.063em solid #6ca1ac;
}
.menu a {
    display: block;
    padding: 0 1em;
    line-height: 2.5em;
    position:relative;
    font-weight: bold;
    text-decoration: none;
    color: #364652;
    background-color: #86B2BB;
    text-shadow: 0 0.063em 0 #a6c6cd;
}
.menu a:hover,
.menu a:active,
.menu a:focus {
    color: #eee;
    text-shadow: 0.063em 0.063em 0 #547177;
}
.menu a[data-bubble]::after {
    content: attr(data-bubble);
    position: absolute;
    top: 0;
    right: 0.5em;
    line-height: 1.5em;
    padding: 0 0.46em;
    text-shadow: 0 0.063em 0 rgba(0, 0, 0, 0.2);
    background-color: #eee;
    color: #364652;
    box-shadow: 0 0.063em 0.063em rgba(0, 0, 0, 0.2);
    border-radius: 4em;
    z-index: -1;
    transform: translateZ(0);
}
a.gold[data-bubble]::after {
    background-color: gold;
}
.menu a:hover[data-bubble]::after,
.menu a:active[data-bubble]::after,
.menu a:focus[data-bubble]::after {
    animation: bubbleover 0.4s;
    animation-fill-mode: both;
    top: -1.25em;
    z-index: 1;
}
@keyframes bubbleover {
    0%   {
        top: 0;
        transform: translateY(0);
        z-index: -1;
    }
    50% {
        transform: translateY(-12px);
        z-index: -1
    } 
    100% {
        transform: translateY(6px);
        z-index: 1;
    }
}

CSS, アニメーション

著者プロフィール

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

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

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

著書