【Simple】CSS Text Animation 01

web言語ロゴ

本日はシンプルだけど、格好良い演出の出来るテキストアニメーションを1つ記載していきます。

具体的には、javascriptなどは使用せず、CSSのみで動かす方法で、文字1つ1つを動かすような演出ではなく、1つの要素をマスクで隠した後、下から上へスライドインさせて表示するやり方になります。
ですので、テキストだけではなく、画像などの要素にも使用出来ます。

とりあえず、どんなモノか見た方が早いので、実際のデモを載せます。

1.デモ

※上記領域、右側にカーソル移動後、現れたRERUNボタンクリックで再度再生。
※スマホの場合は上記領域、右下あたりをタップでRERUNボタンが現れます。

メインビジュアルの上で表示させるキャッチコピーの演出など、基本的にはサイトにアクセスした時に、表示させるテキストに使えると思います。

2.HTMLファイル

<div class="catch_wrap">
	<h2 class="catch">Hope and keep busy.</h2>
	<div class="line"></div>
</div>

<div class=”line”></div>の部分が、最初にセンターから左右に向かって伸び、左右に伸びきった後、上に領域を伸ばして最後は消えてしまう黒い部分になります。
<div class=”catch_wrap”>で囲うコトで、<div class=”line”></div>の拡大、伸びる範囲を制限します。

3.CSSファイル

.catch_wrap{
	position: relative;
	display: inline-block;
	overflow: hidden;
}
.catch {
	opacity: 0;
	margin: 0;
	position: relative;
	bottom: -30px;
	font-size: 30px;
	white-space: nowrap;
	animation: catch 2s ease 4s 1;
	animation-fill-mode: forwards;
}
.line{
	background-color: #000;
	width: 100%;
	bottom: 0;
	position: absolute;
	transform: scaleX(0);
	animation: line 5s ease 2s 1;
	animation-fill-mode: forwards;
}
@keyframes line {
	0%     {bottom: 0;height: 5px;}
	20%   {transform: scaleX(1);}
	40%   {height: 5px;}
	50%   {bottom: 0;height: 100%;}
	70%   {bottom: 100%;height: 100%;} 
	100% {bottom: 100%;height: 0;transform: scaleX(1);}
}
@keyframes catch {
	0%    {opacity: 0; }
	100% {opacity: 1; bottom: 0;} }

.catch_wrapdisplayblockまたは記載なくても良いですが、テキストの長さに演出領域を抑えたい場合はinline-blockにしておきます。
overflow: hidden;に設定するのは、.catchの部分をスライドイン演出させるために、スタート位置をbottom: -30px;とし、親要素の.catch_wrapからはみ出る形をとっているので、それを隠すためです。

.catchopacity: 0;は最初はテキストを見えないようにしておくためです。
@keyframes catch にありますが、100% {opacity: 1; }で、最終的には見えるようにします。
white-space: nowrap;としてあるのは、テキストが改行しないようにです。
テキストが改行してしまうと、縦幅がかわり想定していた動きではなくなってしまうからです。
animation: catch 2s ease 4s 1;は、プロパティを左から説明すると、@keyframescatchと言う名前で設定したモノを2秒の中で処理が終わるように実行します。
また、動き方はeaseと言う動き方にして、CSSデータを読み込んでから4秒後に開始し、1回だけ再生すると言う意味です。
animation-fill-mode: forwards;はアニメーション終了後、最後の@keyframes(100%)のスタイルを維持すると言う意味です。

.linetransform: scaleX(0);は要素を縮小させる為に使用しています。
scale()は要素を真ん中を軸にして、拡大縮小してくれます。
それによって、@keyframes linetransform: scaleX(1);と設定するコトによって、真ん中から伸びていく(拡大)動きになる訳です。

@keyframesに関しましては、lineであれば、5秒間の中で0%から100%の動きをさせると言う指定になっています。
単純に1秒で20%処理が進む形です。
0% {bottom: 0;height: 5px;}とするコトで、.catch_wrapの領域の一番下の部分で、高さ5pxの範囲でスタートします。
lineのアニメーションがスタートして半分経ったら、上へ伸びる動きに変わり、最後はheight: 0;としline要素を消します。

ざっとした説明で、1個1個プロパティ解説をした訳ではないので、わかりにくい部分もあるかと思いますが、とりあえずコピペである程度使えると思います。

ただ、フォントサイズが違ったり、画像を使う場合で結構高さがあるモノを使うと、この設定では上手く動作しません。
その場合は、.catch.lineanimationの秒数を調整すると、改善出来ると思います。

Categories: CSS タグ: