Design

CSSで行を塗りでアニメーションさせた後テキスト表示

キャッチコピーなどのテキストの行をbackground-colorの塗りをアニメーションさせたあと表示するような表現を試してみました。

アニメーションはCSSのみ。キーフレームを使って書いてます。

アニメーションが適用される部分のHTML（抜粋）です。

<div><span class="one anim">Interface Architects</span></div>

アニメーションのCSSは以下。

.anim{
animation-name: loadin;
animation-duration: 0.4s;
animation-timing-function:ease-in-out;
animation-delay:0.5s;
animation-iteration-count:1;
animation-fill-mode:forwards;
background-clip: content-box;
}

@keyframes loadin {
0% {
color:#000;
width: 1px;
background-color:#000;
opecity:0;
overflow: hidden;
}
10%{
color:#000;
width:1px;
background-color:#000;
opacity:1;
overflow: hidden;
}
50%{
color:#000;
width:180px;
background-color:#000;
opacity:1;
}
80%{
color:#000;
width:180px;
background-color:#000;
opacity:1;
}
100% {
color:#000;
width: 180px;
background-color:tranparent;
opacity:inherit;
}
}

アニメーションが適用される部分の初期状態のCSSです。
.oneというクラスを以下のように書きます。

.one{
position:absolute;
left:100;
top:100;
display;block;
width:1px;
opacity:0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background-clip: content-box;
}

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

「text-overflow: ellipsis;」は、テキスト幅よりボックス要素が小さい時に、入りきらない分を省略してくれるプロパティです。これを書かなかった場合、アニメーションする途中のテキスト幅よりブロック要素の幅が小さい時、行が折り返して表示されてしまいます。

.animというクラスにアニメーションの動きを書きます。

animation-name: （アニメーション名）;
animation-duration: 0.4s;（例は0.4秒）
animation-timing-function:ease-in-out;（イージングの設定。例は最初と最後にイージング）
animation-delay:0.5s;（アニメーション開始までの時間、0.5秒）
animation-iteration-count:1;（アニメーションの再生回数）
animation-fill-mode:forwards;（順送りに再生）

こんな感じです。

次にキーフレームがこちら。

@keyframes （アニメーション名） {
0% {
color:#000;
width: 1px;
background-color:#000;
opecity:0;
overflow: hidden;
}
（初期状態）

10%{
color:#000;
width:1px;
background-color:#000;
opacity:1;
overflow: hidden;
}
（全体の10%）

50%{
color:#000;
width:180px;
background-color:#000;
opacity:1;
}
（50〜80&。幅をテキストの長さまで伸ばす）

80%{
color:#000;
width:180px;
background-color:#000;
opacity:1;
}
100% {
color:#000;
width: 180px;
background-color:tranparent;
opacity:inherit;
}
(背景を黒から透明にし、アニメーション終了)
}

こういう感じです。
少し面倒にも感じるキーフレームですが、アニメーションのタイミングを細かく設定できます。
単純な動きであれば、以下のように「from」「to」で書けます。

@keyframes (name) {
from {
width: 0%;
}
to {
width: 100%;
}
}

デモはこちらから

widthですが、autoでうまく動くと汎用性が高いのですが、今のところ幅を指定してあげないとアニメーションしてくれません…今後の課題とします。