CSS アニメーション終了後のスタイルを保持したい

published: 2019.04.01 / modified: 2019.04.01

CSS の animation-fill-mode プロパティを使用して、CSS アニメーションの実行後のスタイルを保持する。
animation-fill-mode プロパティの値に forwards を設定することで、対象の要素が最後のキーフレームに設定されたスタイルを保持する。

例

HTML

<div class="example"></div>

CSS

.example {
  width: 200px;
  height: 200px;
  background-color: #f00;
  animation-name: move;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 200px;
  }
}