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

今回も引き続き、マウスポインタを重ねたときのテキストのアニメーションだ。前回はお題の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;
}

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

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

その水平線は、テキストにマウスポインタを重ねたとき（: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;
}

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

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

    position: absolute;

}

コード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;
}

擬似要素のテキストを垂直にアニメーションさせる

擬似要素でテキストを2つ加えたのは、テキストの上半分と下半分に別々のアニメーションを与えるためだ。先に、上半分をつくろう。つぎのように、CSSで縦を半分にして、その外は隠す（図5⁠）⁠。

.animation-2 span {

    height: 50%;
    width: 100%;

    overflow: hidden;
}

そしてつぎのように、はじめは見えない場所に下げておいたうえで、マウスポインタが重なったらもとの位置に戻す。すると、テキストが垂直方向中央からせり上がるアニメーションになる（図6⁠）⁠。ここで、プロパティtransition-timing-functionは、transitionにも定められるタイミング関数を設定する（第2回の「メニューの開け閉じの動きを加える」参照⁠）⁠。このプロパティを使えば、マウスポインタが重なったときと、外れたときとで動き方が変えられる。なお、タイミング関数のデフォルトはeaseだ。

.animation-2 span::before {

    transition: 0.5s;
    transform: translateY(100%);
}
.animation-2:hover span::before {
    transform: translateY(0);
    transition-timing-function: ease-out;
}

タイミング関数のease-inの値の変化は、つぎの図7のとおり、動き終わるところで減速する。アニメーションにこの関数を与えた擬似要素は、はじめ隠れているので、少し遅れて表れて徐々に動きが遅くなっていくように見える。

2つ目の擬似要素で下半分のテキストアニメーションを加える

前項では、2つの重なった擬似要素のテキストが同じアニメーションをしていた。これを上半分と下半分別々に定めよう。2つの<span>要素は、擬似クラス:first-childと:last-childで切り分ければよい（第3回「メニュー項目の間に区切り線を入れる」参照⁠）⁠。そこで、上半分はつぎのように書き替える。

.animation-2 span::before {

    /* transform: translateY(100%); */
}
.animation-2 span:first-child::before {
    transform: translateY(100%);
}

下半分は、<span>要素の位置（topプロパティ）を半分下にずらし、擬似要素は上半分とは反対にもとのテキストの上外側に隠した。そして、マウスポインタを重ねたときもとの位置に戻せば、2つの擬似要素のテキストは垂直方向の真ん中から半分ずつ上下に広がるように表れる（図8⁠）⁠。

.animation-2 span:last-child {
    top: 50%;
}

.animation-2 span:last-child::before {
    bottom: 0;
    transform: translateY(-100%);
}

仕上げに、もとのテキスト（class属性"animation-2"）にも、つぎのようにtransitionプロパティを定めた。2つめの秒数値は、アニメーションを始めるまでのタメ（遅れ）を与える。そして、マウスポインタが重なったときの値はnoneに切り替え、colorプロパティを透明（transparent）にしたので、すぐに消える。マウスポインタを外したら、少しタメて表れるというアニメーションになる。

.animation-2 {

    transition: 0.5s 0.25s;

}
.animation-2:hover {
    transition: none;
    color: transparent;
}

これで、このテキストのアニメーションもでき上がった。まとめよう。<body>要素に加えたHTMLコードは、本稿のはじめに示したとおりだ。書き上がったCSSの定めが、つぎのコード3になる。以下のサンプル1には、前回の分も含めて3つのテキストのアニメーションを掲げた。

コード3　水平に横切る線と真ん中から上下に広がるテキストのアニメーション

.animation-2 {
    font-weight: 800;
    color: Steelblue;
    font-family: 'Dosis', sans-serif;
    transition: 0.5s 0.25s;
    overflow: hidden;
    line-height: 1.3em;
    margin-top: -0.2em;
}
.animation-2:hover {
    transition: none;
    color: transparent;
}
.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;
    height: 50%;
    width: 100%;
    left: 0;
    overflow: hidden;
}
.animation-2 span::before {
    content: attr(data-letters);
    position: absolute;
    color: white;
    transition: 0.5s;
}
.animation-2 span:last-child {
    top: 50%;
}
.animation-2 span:first-child::before {
    transform: translateY(100%);
}
.animation-2 span:last-child::before {
    bottom: 0;
    transform: translateY(-100%);
}
.animation-2:hover span::before {
    transform: translateY(0);
    transition-timing-function: ease-out;
}

サンプル1　CSS3：Text styles and hover effects