TL;DR
ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回は CSS のみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。
透過処理で文字のくり抜き
background-clipプロパティは背景の範囲（ボックスモデル・ボーダーボックス・パディングボックス）に表示するか指定します。このプロパティは文字で背景を切り抜くことが可能ですが、-webkit-background-clip: text;と-webkit-text-fill-color: transparent;
指定することによって文字が透明になり、文字下の画像が見え、背景をくり抜いたような形を表現できます。
.foo {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
スクイグル
スクイグル（squiggle - ドナルド・ウィニコットが提唱した芸術療法の一つ。なぐり描き法 | 医療法人板倉医院）を表現。なぐり描いたような、クネクネ曲がったアニメーション。filter プロパティで SVG の filter で定義した設定を使いフィルタをかけています。
.foo {
filter: url(#squiggly-1);
}
アップダウン
keyframes に transform: translateY();を設定し上下にテキストを動かしています。translateY()関数で Y 方向の移動を指定するだけ。
@keyframes change {
0%,
12%,
100% {
transform: translateY(0);
}
17%,
29% {
transform: translateY(-25%);
}
34%,
46% {
transform: translateY(-50%);
}
51%,
63% {
transform: translateY(-75%);
}
68%,
80% {
transform: translateY(-50%);
}
85%,
97% {
transform: translateY(-25%);
}
}
スモーキー
テキストを煙のようなエフェクトを使いフェードさせる珍しい動き。各文字を span で囲う必要がありますが、文字に移動・変形・回転・傾き・縮尺を指定して違和感なく文字を消してます。
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
バウンド・クラッシュ
文字どうしをクラッシュ・バウンドさせるエフェクトです。transform: scaleYで縦方向へ縮尺、transform-originで原点を指定し、滑らかにバウンドしているように見えます。
フェード
transform: scaleで拡大・縮小、後は text-shadow と opacity で滑らかにフェードさせています。
カウントダウンタイマー
一見するとどうやってんだろうと思うのですが、数値に一つ一つ span を振り、各桁にアニメーションの長さを指定するanimation-durationを設定し数値の動きに変化をつけています。
マスク
こちらはmask-imageを使ってマスクをかけています。ちなみにmask-sizeは表示サイズ、mask-clipは表示エリア。
-webkit-mask-image: url(img/mask.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
ブレンド
mix-blend-modeプロパティを使い、グラデーションとテキストをブレンドしています。
CSS Gradient Text in Firefox mix-blend-mode の値の違いはこちらで確認できます。
シャドウ
text-shadowを使ったパターン 4 種。text-rendering: optimizeLegibility;で文字のレンダリングを行ってます。