animationを使いこなす（遅延・繰り返し・停止）

前のレッスンでは、@keyframesで動きを作りました。このレッスンでは animation の細かい指定を覚えて、「ページを開いたら順番に出てくる見出し」や「読み込み中のくるくる」など、実際のサイトでよく使う形に仕上げます。

ここから。

▲ 上：1文字ずつ順番に出る見出し　下：読み込み中のくるくる

animationの値をひとつずつ見る

animation もショートハンドです。よく使うのは次の8つです。

animation-name：@keyframesの名前
animation-duration：1回にかける時間
animation-timing-function：速さの変化（transitionと同じ）
animation-delay：始まるまでの待ち時間
animation-iteration-count：回数（3、infinite など）
animation-direction：向き（alternate で行って戻る）
animation-fill-mode：始まる前・終わった後の状態
animation-play-state：再生／一時停止

演出1：ふわっと出てきて、そのまま止まる

ページを開いたときに要素が下からふわっと出てくる演出です。ここで大事なのが animation-fill-mode: forwards。これがないと、アニメーションが終わった瞬間に元の状態（透明）に戻ってしまいます。

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.title {
  opacity: 0;                                /* 最初は見えない */
  animation: fadeUp 0.6s ease-out forwards;  /* 終わったら最後の状態で止まる */
}

【ポイント】forwardsを忘れると「パッと消える」
最初に opacity: 0 にしているので、forwards がないと、ふわっと出たあと一瞬で消えてしまいます。「出てきて止まる」演出には forwards をセットで書きましょう。

演出2：delayをずらして順番に出す

同じアニメーションでも、animation-delay を少しずつずらすと、順番に動いて見えます。上のデモの見出しは、1文字ずつ0.15秒ずらしています。

.title span {
  display: inline-block;   /* transformを効かせるため */
  opacity: 0;
  animation: fadeUp 0.6s ease-out forwards;
}
.title span:nth-child(2) { animation-delay: 0.15s; }
.title span:nth-child(3) { animation-delay: 0.3s; }
.title span:nth-child(4) { animation-delay: 0.45s; }
.title span:nth-child(5) { animation-delay: 0.6s; }

spanにinline-blockが必要な理由

span はインライン要素なので、そのままでは transform が効きません。display: inline-block にすると動くようになります。

演出3：読み込み中のくるくる（ローディング）

枠線の上だけ色を変えて、回し続けるだけで作れます。回転は一定の速さが自然なので、linear を使います。

.loading {
  width: 40px;
  height: 40px;
  border: 4px solid #eee;
  border-top-color: #6b1f4f;   /* 上だけ色を変える */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }   /* fromは省略できる */
}

演出4：マウスを乗せたら一時停止する

.marquee:hover {
  animation-play-state: paused;
}

流れ続けるお知らせやロゴの帯などで、「読みたいときに止まる」ようにできます。

動きが苦手な人への配慮

パソコンやスマホの設定で「視差効果を減らす」「アニメーションを減らす」をオンにしている人もいます。その設定のときは、動きを止めるようにしておきましょう。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

まとめ

出てきて止まる演出には forwards
animation-delay をずらすと順番に動く
ローディングは linear と infinite
prefers-reduced-motion で、動きが苦手な人に配慮する

次のレッスンでは、ページをスクロールして要素が見えたときに、ふわっと表示させる演出を作ります。