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

第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;
}
図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擬似クラス⁠⁠、テキストの右端に横切ってゆくtransitiontransformプロパティ⁠⁠。なお、テキストアニメーションのクラスanimation-2overflowプロパティに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;
}

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

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

.animation-2 span {

    height: 50%;
    width: 100%;

    overflow: hidden;
}
図5 擬似要素のテキストの上半分だけが表れた
図5 擬似要素のテキストの上半分だけが表れた

そしてつぎのように、はじめは見えない場所に下げておいたうえで、マウスポインタが重なったらもとの位置に戻す。すると、テキストが垂直方向中央からせり上がるアニメーションになる図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;
}
図6 マウスポインタを重ねると垂直方向中央から上に向かってテキストが表れる
図6 マウスポインタを重ねると垂直方向中央から上に向かってテキストが表れる

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

図7 タイミング関数のease-out
図7 タイミング関数のease-out
この図Mozilla Contributorsによるもので、CC-BY-SA 2.5のもとで利用が許諾されています。

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%);
}
図8 マウスポインタを重ねると2つの擬似要素のテキストが垂直方向真ん中から上下に広がるように表れる
図8 マウスポインタを重ねると2つの擬似要素のテキストが垂直方向真ん中から上下に広がるように表れる

仕上げに、もとのテキスト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

おすすめ記事

記事・ニュース一覧