本記事では、以下のように指定したテキストなどをゆっくり／徐々に表示するアニメーション（スライドイン）の実装方法を紹介します。
（ボタンをクリックすると、実装したアニメーションが開始されます。）
HTML / CSS コード
<div class="reveal-text">テキストが左から右へ、ゆっくり／徐々に表示されます。</div>.reveal-text {
animation: revealText 2s ease-out forwards;
display: inline-block;
color: white;
font-weight: bold;
background-color: orange;
}
@keyframes revealText {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}【実装のポイント】アニメーション(animation) と キーフレーム(@keyframes)プロパティ
CSSのanimationと@keyframesプロパティを用いることで、ページを表示したときなどのタイミングで簡単にアニメーションを設定することができます。
アニメーションプロパティ(animation)
animationプロパティは、アニメーションの持続時間、タイミング関数、遅延時間、反復回数などを設定するために使用されます。
このプロパティはショートハンドであり、複数のアニメーションプロパティを一度に指定できます。
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];- duration
-
アニメーションが完了するまでの時間を指定
- timing-function
-
アニメーションの進行速度を指定
- delay
-
アニメーションが開始されるまでの遅延時間を指定
- iteration-count
-
アニメーションが繰り返される回数を指定
- direction
-
アニメーションの進行方向を指定
- fill-mode
-
アニメーションが終了した後のスタイルを指定
- play-state
-
アニメーションが再生中か停止しているかを指定
- name
-
@keyframesで定義したアニメーションの名前
今回の実装例では、以下のように[name] [duration] [timing-function] [fill-mode]の4つを指定したアニメーションを、表示するテキスト要素にセットしています。
.reveal-text {
animation: revealText 2s ease-out forwards;
/*
revealText: @keyframesを使って定義されたアニメーション名。
2s: アニメーションを2秒かけて実施。
ease-out: アニメーション開始時には速く、終了に向けて徐々に遅くなる。
forwards: アニメーションが終了した後も、要素は最終状態（本実装例の場合はテキストが全て表示された状態）に留まる。
*/
}キーフレームプロパティ（@keyframes）
@keyframesを使用すると、さまざまなステップでアニメーションのスタイルを指定できるようになります。
@keyframes animation-name {
0% { /* 開始スタイル */ }
100% { /* 終了スタイル */ }
}@keyframes double {
from { transform: scale(1); }
to { transform: scale(2); }
}
.bigger {
animation: double 1s ease-in-out forwards;
}この例では、biggerクラスを持つ要素をホバーしたときに、その要素が1秒かけて元のサイズから2倍に大きくなります。ease-in-outはアニメーションの開始と終了がゆっくりになるタイミング関数で、forwardsはアニメーション終了後も最終状態（2倍に大きくなった状態）を保持します。
【実装のポイント】clip-pathプロパティ
clip-pathプロパティを使うことで、要素の表示領域を指定した形状にクリップ（切り抜き）できます。
これと前項のanimationと@keyframesを併用することで、要素の左側から徐々に全体を表示するアニメーションを作成できます。
inset()関数について
clip-path: inset(); を使うと、要素の表示領域を内側に向かって切り取ることができます。
引数に、上・右・下・左の辺からの切り取る量を指定することで、要素の一部を非表示にし、残りの部分を表示します。
clip-path: inset(<top> <right> <bottom> <left> [round <border-radius>]);top>,<right>,<bottom>,<left>-
要素の各辺から切り取る量を指定。単位はピクセル(px)やパーセンテージ(%)など。
[round <border-radius>]:-
切り取りの角を丸めるために使用。
border-radiusと同様の値を指定できます。
今回の実装例では、以下のように@keyframesと合わせて実装することで、左から右へと「スライドイン」するようなテキストやコンテンツが表示されるアニメーションを作成しています。
@keyframes revealText {
/* アニメーションの開始時点 */
from {
/* 要素の左から右への表示領域を0%にし、要素が完全に隠れるように設定。*/
clip-path: inset(0 100% 0 0); /* 上, 右, 下, 左 */
}
/* アニメーションの終了時点 */
to {
/* 要素が全て表示されるように設定。
要素が左から右へと表示されるようなアニメーションになる。 */
clip-path: inset(0 0 0 0); /* 上, 右, 下, 左 */
}
}その他の目を惹くアニメーション
当サイトでは、関連するアニメーションとして以下のような実装方法も紹介しています。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
