)ログインCSSのclip-pathというプロパティを利用すると、任意のHTML要素を指定したパスの形状に切り抜いて表示させることができます。利用されるケースでは、画像をパスで繋がれた図形の部分だけ切り抜いて表示するというパターンです。clip-pathで画像を切り抜いた例clip-pathプロパティの詳細については、以下の記事がとても参考になります。clip-pathプロパティで切り抜きたい図形を表すためには、図形の各頂点を漏れなくすべて座標で示す必要がありますが、複雑な多角形になるほど自力で計算するのはかなり面倒です。そんなときは、以下のWebサービスを利用すると、マウス操作で求める図形を作成するだけで、clip-pathに指定するパスの値(座標)を自動で生成してくれます。今回のサンプルでは、そんなCSSのclip-pathプロパティを利用して、画像ではなくテキストをtransitionと組み合わせてアニメーション表示するコードをつくってみました。※対象が図形ではなく、ただテキスト要素になっているだけなので、特に目新しいことはしていませんが。それではサンプルパターンをまずはご覧ください。基本動作の説明clip-pathプロパティを利用して上のデモのようにテキストをアニメーションで表示するには、まずはテキストが見えない状態の初期値のパスと、初期値からパスが移動することを前提としたアニメーション(表示)後のパスの2つのパス情報を用意します。transitionプロパティでアニメーション時間やイージングパターンを定義しておきます。ease;あとは、アニメーション(表示)するトリガー(マウスオーバーなど)を決めてアニメーション後のclip-pathを指定してCSSを定義するのみです。上のサンプルでは、ボタンのクリックをjQueryで検知して、対象テキスト要素にアニメーション後のパスが反映されるセレクタを追加または削除することでクリップパスのアニメーションを表現しています。左からテキストが現れるようにするには、clip-pathプロパティにinsetを指定し、まずは右側から左側に向けて100%切り抜いて(オフセット)テキストが見えない状態にしておき、表示する際は切り抜いていた状態を元にもどすことで表現できます。clip-pathのinsetの構文insetに指定できる値は、上、右、下、左の順でそれぞれの方角からのオフセットを、px、em、ex、%の単位から指定できます。右からオフセットされたテキストが表示されるようにするには、左からの表示される場合の要領で、左側のオフセットを100%に変更するだけです。inset(0);上からテキストを表示こちらも下側のオフセットを100%に変更するだけです。クリップの基点)の書式で指定できます。center)とし、初期値の大きさは0です。中心から、100%の大きさに円形パスを描いてテキストが見える状態にします。50%);左上からに三角形に切り抜きながらテキストを表示clip-pathでpolygonを指定すると、図形の各頂点の位置(x,y)を複数指定することにより、多角形に切り抜くことができます。初期状態(左上)から、右と下に向けて元の要素の2倍の大きさまで拡大する三角形で切り抜きながら表示します。みを加えたアニメーションを施した例。skew(8deg);また、このサンプルはtransitionでイージングもカスタマイズしています。skew(0);その他、複数行にわたるテキストをそれぞれ遅延(transition-delay)させて順番に表示するなど、アイディアは色々とありますね。ExplorerとEdgeでは全バージョンで未対応です。http://caniuse.com/#search=clip-path思い切ってMS系のブラウザについてはもう見切りを付けてしまえれば、clip-pathはとても重宝するのではないでしょうか。ほんとにIEとEdgeはディベロッパー泣かせです。ショートコード応用カスタマイズAMPモードについてアップデート。