0%

Programmingプログラミングナレッジ

Posted:2018.03.20

CSSでタイポグラフィのSVGアニメーションを実装する

当サイトでもファーストビューでロゴタイプのアニメーションに使っているのですが、タイポグラフィのアウトラインがアニメーションとなって描かれるようなものになります。過去記事「XML形式のデータ編集でパスを変形させるSVGアニメーションを実装」では直接XML形式のデータを編集して、パスの変形を行いましたが、今回はパスにCSSでアニメーションをつけていきたいと思います。

 

パスのアウトラインを描くアニメーション

CSSではパスの変形など、直接オブジェクトの形を変えることはできないのですが、移動や色を変えたりとCSSで行えるものは応用することができます。ここではパスのアウトラインをアニメーションをつけて描いていきます。タイポグラフィに適用するので手書きで文字が書かれているように見せることができます。

 

具体的なアプローチとしては、SVGのパスアウトラインをCSSのアニメーションを使って操作していくことになりますが、あまり見かけないプロパティもたくさん登場するので合わせて見ていきたいと思います。

 

SVGのパスをCSSで編集するときによくつかうプロパティ

SVGをCSSで操作するときには、普段のコーディングではあまり使用しないプロパティが出てきます。以下では今回つかうものを中心にまとめました。

 

fill パスの塗りを指定します。16進数やrgbaのカラーコードなどで指定します。
stroke 線の色を指定します。同じく16進数やrgbaのカラーコードなどで指定します。
stroke-width 線の太さを指定します。pxやemなどの単位で指定できます。
stroke-dasharry 破線にした時の実線と間隔の大きさを指定します。小さいと点線に、大きくなるにつれて長い破線になっていきます。
stroke-offset 線が始まる基準の位置を指定します。パスの外周からはみ出した分は非表示となります。

 

今回のアニメーションのポイントとして、stroke-dasharryとstroke-offsetを理解しておく必要があります。stroke-dasharryとstroke-offsetを同じ値にすると全ての線がパスの外周からはみ出すことになりますので、パスが表示されていない状態になります。このstroke-offsetの位置をアニメーションでずらしていくことにより、順にアウトラインの線が表示されるように見せるので、まるで手書きで文字を書いているような動きとなります。

 

animationプロパティと@keyframeの設定

そして、動きのメインとなるanimationプロパティとキーフレームについても見ていきます。animationプロパティはアニメーションの詳細設定を、キーフレームは経過進捗に対しての設定を入れていく形になります。

 

CSSでは同じようなものにtransitionプロパティもありますが、微妙に違うのと、animationプロパティは数も多いので、まずはこれらを頭に入れておくことが大切です。

 

animation-name キーフレーム設定を紐つけるためのラベルの役割をします。分かりやすい名前をつける方がいいでしょう。
animation-duration アニメーションにかかる時間を設定します。この時間がアニメーション開始から終了までの時間になります。
animation-timing-function イージングを設定します。easeやease-in、ease-in-outから、ベジェ曲線の座標での指定もできます。
animation-delay アニメーションを遅延させる時間を設定します。ここに設定した時間が経過したらアニメーションが実行されます。
animation-iteration-count アニメーションを繰り返す回数を指定します。infiniteの場合は無限にアニメーションが繰り返されます。
animation-direction アニメーションの再生方向を指定します。通常再生(normal)、逆再生(reverse)、交互再生(alternate)などが指定できます。
animation-fill-mode アニメーション終了時の状態を指定します。forwardsを設定することでアニメーション終了時の状態でおいておくことができます。
animation-play-state アニメーションを一時停止にすることができます。再生中(running)か一時停止(paused)が指定できます。

 

また、これらのプロパティは上から順にanimationプロパティとしてショートハンドで記述することができます。

// 例
animation: 5s ease-in 0.2s infinite alternate none running;

 

SVGをCSSアニメーションで操作する

ではコードの方も見ていきます。まずは過去記事「XML形式のデータ編集でパスを変形させるSVGアニメーションを実装」で紹介した時と同じようにインラインでHTMLにSVGのオブジェクトを用意します。CSSで操作することになるのでIDやclassをpath要素に対して振っておきます。

【HTML】※一部抜粋

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100" viewBox="0 0 300 100">
   <g>
     <path id="anim_obj" d="M4.30254328,37.9489877 C6.90671408,38.00………80,39.436892 Z">
     </path>
   </g>
</svg>

 

CSSでは先ほどのsvgにあるpathのスタイル指定を行なっていきます。上記であげたプロパティを参考にデザインに合わせていきます。またキーフレームも合わせて用意しておきます。キーフレームも表現したいアニメーションに合わせておきます。

 

【CSS】※一部抜粋#

#anim_obj {
  stroke: #000;
  stroke-width: 1;
  stroke-dasharray: 3000;
  stroke-dashoffset:3000;
  fill: rgba(0,0,0,0);
  animation: ANIM 5s ease-in-out 0s infinite alternate none running;
  -webkit-animation: ANIM 5s ease-in-out 0s infinite alternate none running;
}
@keyframes ANIM {
  0% {
    stroke-dashoffset: 3000;
  }
  100% {
    stroke-dashoffset: 0;
    fill: rgba(0,0,0,1);
  }
}
@-webkit-keyframes ANIM {
  0% {
    stroke-dashoffset: 3000;
  }
  100% {
    stroke-dashoffset: 0;
    fill: rgba(0,0,0,1);
  }
}

 

ポイントとなるのはキーフレームの0%つまりアニメーション開始時にstroke-dashoffsetをstroke-dasharrayと同じ値に設定しておきます。そして、終了時にstroke-dashoffsetが0になるようにすることで、パスに沿ってアウトラインが描かれていきます。

 


 

これで確認してみるとSVGのパスが手書きで描かれるように見せることができます。ロゴタイプなどのテキストに適用されるデザインがよく見られる通り相性がいいかもしれないですね。今回のサンプルはこちらにあげておりますので参考にご利用ください。プラグインなどもいろいろありますが、自前で実装するのもそこまで大変ではないので一度試して見てはいかがでしょうか。

 

(参考にさせて頂いたサイト様)
線や塗りなど描画が美しいSVGアニメーションの作り方
CSSアニメーション 入門

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】