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

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

CSS, アニメーション

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

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

擬似要素でテキストを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

CSS, アニメーション

著者プロフィール

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

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

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

著書