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

第9回　マウスポインタを重ねたテキストのアニメーション（2）

CSS, アニメーション

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

今回も引き続き，マウスポインタを重ねたときのテキストのアニメーションだ。前回はお題の3つのサンプルのうち2つ解説したので，残りのひとつを仕上げよう。今回も，擬似要素の扱いとそれらのアニメーションが鍵になる。

テキストの上を水平線が横切る

前回の「2つの項目の静的なデザイン」で<body>要素に書いたコードに，テキストが含まれた要素をつぎのように加える。つくりは他の2項目と同じで，<div>要素（class属性"item"）の中にリンクのための<a>要素（class属性"link"）を含めた。ただ，テキストは直に書き込み，data-グローバル属性が与えられた空の<span>要素を2つ添えた。そして，<a>要素にはアニメーションのためのclass属性（"animation-2"）も加えてある。

<div class="container">

    <div class="item">
        <a class="link animation-2" href="http://gihyo.jp/design/serial/01/away3d-typescript">
            Away3D
            <span data-letters="Away3D"></span>
            <span data-letters="Away3D"></span>
        </a>
    </div>

</div>

このアニメーションのclass属性（"animation-2"）には，まずつぎのような静的なスタイルを与える。まだアニメーションもマウスインタラクションもない（図1）⁠。アニメーションのほとんどは，これから擬似要素で加えてゆくことになる。

.animation-2 {
    font-weight: 800;
    color: Steelblue;
    font-family: 'Dosis', sans-serif;
    line-height: 1.3em;
    margin-top: -0.2em;
}

図1　<a>要素に加えたテキストの静的なスタイル

図1　＜a＞要素に加えたテキストの静的なスタイル

はじめに加える擬似要素は，横に細長い線のような矩形だ。つぎのCSSで定め，位置はtransformプロパティに与えたtranslateX()関数でテキストの左に移した（図2）⁠。

.animation-2::before {
    content: '';
    width: 100%;
    height: 6px;
    background: white;
    position: absolute;
    top: 50%;
    transform: translateX(-100%);
}

図2　::before擬似要素でテキストの左に加えた水平線

図2　::before擬似要素でテキストの左に加えた水平線

その水平線は，テキストにマウスポインタを重ねたとき（:hover擬似クラス）⁠，テキストの右端に横切ってゆく（transitionとtransformプロパティ）⁠。なお，テキストアニメーションのクラス（animation-2）のoverflowプロパティにhiddenを与えて，テキストの外側は隠した。ここまでのCSSの定めをまとめたのが以下のコード1だ。

.animation-2 {

    overflow: hidden;

}

.animation-2::before {

    transition: 0.4s ease-in-out;
}
.animation-2:hover::before {
    transform: translateX(100%);
}

コード1　テキストの上を擬似要素の水平線が横切る

.animation-2 {
    font-weight: 800;
    color: Steelblue;
    font-family: 'Dosis', sans-serif;
    overflow: hidden;
    line-height: 1.3em;
    margin-top: -0.2em;
}
.animation-2::before {
    content: '';
    width: 100%;
    height: 6px;
    background: white;
    position: absolute;
    top: 50%;
    transform: translateX(-100%);
    transition: 0.4s ease-in-out;
}
.animation-2:hover::before {
    transform: translateX(100%);
}

擬似要素でつくった2つのテキストを重ねる

つぎに，テキストアニメーションの要素（class属性"animation-2"）に含めた2つの<span>要素にも，つぎのようにそれぞれ擬似要素を加え，data-グローバル属性からattr()式で得た同じテキストを異なる色で定めた（図3）⁠。

<a class="link animation-2" href="http://gihyo.jp/design/serial/01/away3d-typescript">
    Away3D
    <span data-letters="Away3D"></span>
    <span data-letters="Away3D"></span>
</a>

.animation-2 span::before {
    content: attr(data-letters);
    color: white;
}

図3　擬似要素で加えられた2つのテキスト

図3　擬似要素で加えられた2つのテキスト

そのうえで，つぎのCSSにより擬似要素のテキストをもとのテキストに重ね合わせた（図4）⁠。この後，2つの擬似要素のテキストにアニメーションを与える。ここまでのCSSの定めをまとめたのが以下のコード2だ。

.animation-2 span {
    position: absolute;
    left: 0;
}
.animation-2 span::before {

    position: absolute;

}

図4　2つの擬似要素のテキストがもとのテキストに重なった

図4　2つの擬似要素のテキストがもとのテキストに重なった

コード2　擬似要素のテキストを2つもとのテキストの上に重ねて置く

.animation-2 {
    font-weight: 800;
    color: Steelblue;
    font-family: 'Dosis', sans-serif;
    overflow: hidden;
    line-height: 1.3em;
    margin-top: -0.2em;
}
.animation-2::before {
    content: '';
    width: 100%;
    height: 6px;
    background: white;
    position: absolute;
    top: 50%;
    transform: translateX(-100%);
    transition: 0.4s ease-in-out;
}
.animation-2:hover::before {
    transform: translateX(100%);
}
.animation-2 span {
    position: absolute;
    left: 0;
}
.animation-2 span::before {
    content: attr(data-letters);
    position: absolute;
    color: white;
}

CSS, アニメーション

著者プロフィール

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

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

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

著書