分12今回も引き続き,マウスポインタを重ねたときのテキストのアニメーションだ。前回はお題の3つのサンプルのうち2つ解説したので,残りのひとつを仕上げよう。今回も,擬似要素の扱いとそれらのアニメーションが鍵になる。テキストの上を水平線が横切る前回の「2つの項目の静的なデザイン」で<body>要素に書いたコードに,テキストが含まれた要素をつぎのように加える。つくりは他の2項目と同じで,<div>要素(class属性"item")の中にリンクのための<a>要素(class属性"link")を含めた。テキストは直に書き込み,data-グローバル属性が与えられた空の<span>要素を2つ添えた。,<a>要素にはアニメーションのためのclass属性("animation-2")も加えてある。</div></div>このアニメーションのclass属性("animation-2")には,まずつぎのような静的なスタイルを与える。アニメーションもマウスインタラクションもない(図1⁠)⁠。アニメーションのほとんどは,これから擬似要素で加えてゆくことになる。<a>要素に加えたテキストの静的なスタイルはじめに加える擬似要素は,横に細長い線のような矩形だ。つぎのCSSで定め,位置はtransformプロパティに与えたtranslateX()関数でテキストの左に移した(図2⁠)⁠。::before擬似要素でテキストの左に加えた水平線その水平線は,テキストにマウスポインタを重ねたとき(:hover擬似クラス⁠)⁠,テキストの右端に横切ってゆく(transitionとtransformプロパティ⁠)⁠。テキストアニメーションのクラス(animation-2)のoverflowプロパティにhiddenを与えて,テキストの外側は隠した。ここまでのCSSの定めをまとめたのが以下のコード1だ。translateX(100%);}擬似要素でつくった2つのテキストを重ねるつぎに,テキストアニメーションの要素(class属性"animation-2")に含めた2つの<span>要素にも,つぎのようにそれぞれ擬似要素を加え,data-グローバル属性からattr()式で得た同じテキストを異なる色で定めた(図3⁠)⁠。擬似要素で加えられた2つのテキストそのうえで,つぎのCSSにより擬似要素のテキストをもとのテキストに重ね合わせた(図4⁠)⁠。この後,2つの擬似要素のテキストにアニメーションを与える。ここまでのCSSの定めをまとめたのが以下のコード2だ。