#77 animation-fill-modeについて

animation-fill-mode　どんな種類があるのかイマイチ把握していなかったため復習しようと思います。

たとえば、デフォルトで青い背景の四角を用意する
アニメーションは、0%でオレンジになり、100%でオレンジのまま30%右に動くとする。　↓アニメーションはこんな感じ。

@keyframes slide{
  0% {
    background-color: orange;
    margin-left:0;
  }
  100%{
    background-color: orange;
    margin-left: 30%;
  }
}

none：終わったら、初期状態に戻る

animation: slide 1s ease-in 1;

forwards：最後が100%の状態になる。最初の一瞬だけ青の状態

animation: slide 1s ease-in forwards 1;

backwords：最初から0%の状態。終わったら初期状態の位置と色に戻る

animation: slide 1s ease-in backwards 1;

both：最初から0%の色、最後も100%の色と位置

animation: slide 1s ease-in both 1;

こう考えるとboth一択な気がするが。他の値の使いどころって何だろう。

デモ　

仕様（↓こっちのほうが動きがわかりやすい）

animation-fill-mode - CSS: Cascading Style Sheets | MDN

英語的にはforwordが前方へ　で100%で終わる感じ
backwordが後方へ　で0%に重きを置いている感じ
プロパティ的に、forwordがforwords、backwordがbackwordsというふうに、sが付いているけどイギリス英語的な感覚なのだろうか。

<参考>

CSSアニメーション、animation-fill-mode。

ヘッダー画像は、歌川国芳の「源氏雲浮世画合」「佐藤忠信」。