プロパティ animation-fill-mode

プロパティ animation-fill-mode は、 アニメーション終了後にどの位置で停止するかを 設定します。デフォルトでは、アニメーションは 初期値に戻り、これはあまり美しく見えない場合が あります。

構文

cssセレクタ {
  animation-fill-mode: backwards | forwards | both | none;
}

値

デフォルト値: none。

例 . 値 none

この例では、要素の margin-left は 300px に設定されていますが、 アニメーションの最初のフレームでは 0px です。 animation-delay の遅延がないため、ページ読み込み後、要素は 300px ではなく 0px の状態になります。 さらに、アニメーション終了後は初期値に ジャンプして戻ります：

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: none;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

例 . 値 none

この例では、要素の margin-left は 300px に設定されていますが、 アニメーションの最初のフレームでは 0px です。 また、要素には animation-delay として 3 秒の遅延が設定されているため、 ページ読み込み後、要素は 0px ではなく 300px の状態になり、アニメーション開始後 3 秒間その場所に留まった後、 0px にジャンプして移動し、そこから アニメーションが開始します。 さらに、アニメーション終了後は初期値に ジャンプして戻ります：

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: none;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

例 . 値 backwards

この例では、要素の margin-left は 300px に設定されていますが、 アニメーションの最初のフレームでは 0px です。 また、要素の animation-fill-mode は backwards に設定されているため、 ページ読み込み後、要素は animation-fill-mode が none の場合のように 300px ではなく 0px の状態になります。 さらに、アニメーション終了後は初期値に ジャンプして戻ります：

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: backwards;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

例 . 値 none かつ反復回数が 1

この例では、要素の margin-left は 300px に設定されていますが、 アニメーションの最初のフレームでは 0px です。 また、要素には animation-delay として 3 秒の遅延が設定されているため、 ページ読み込み後、要素は 0px ではなく 300px の状態になり、アニメーション開始後 3 秒間その場所に留まった後、 0px にジャンプして移動し、そこから アニメーションが開始します。 animation-fill-mode が none に 設定されているため、アニメーション再生後、 要素は初期値に戻ります：

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: none;
  animation-delay: 3s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

例 . 値 forwards かつ反復回数が 1

この例では、animation-fill-mode は forwards に設定されており、 アニメーションの反復回数 は 1 です。アニメーション再生後、 要素はアニメーションが終了した位置に留まり、 開始地点にジャンプして戻ることはありません。

さらに、要素の margin-left は 300px に設定されていますが、 アニメーションの最初のフレームでは 0px です。 また、要素には animation-delay として 3 秒の遅延が設定されているため、 ページ読み込み後、要素は 0px ではなく 300px の状態になり、アニメーション開始後 3 秒間その場所に留まった後、 0px にジャンプして移動し、そこから アニメーションが開始します：

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

例 . 値 both かつ反復回数が 1

この例では、animation-fill-mode は both に設定されており、 アニメーションの反復回数 は 1 です。ページ読み込み後、 要素はアニメーションの最初のフレームの状態 （300px ではなく 0px）になり、 アニメーション再生後は、要素はアニメーションが 終了した位置に留まり、開始地点にジャンプして 戻ることはありません：

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  margin-left: 300px;
  animation-fill-mode: both;
  animation-delay: 3s;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

関連項目