CSSのanimationで最後の状態を維持する

See the Pen cssのanimationで最後の状態を維持する by takapen (@takapen) on CodePen.

動作サンプルを見てもらうと違いがわかるかと思います。
CSSのアニメーションを、最後の状態のまま止まっているようにしたい場合、
「forwards」をつけると実現できます。


html

01
02

CSS

.test {
  margin: 10px;
  padding: 50px;
  color: #777;
  display: inline-block;
}
.test01 {
  animation: iro 2s ease-in-out;
}
.test02 {
  animation: iro 2s ease-in-out forwards;
}

@keyframes iro {
  0% {
    background: #ccc;
  }
  100% {
    background: #5b3994;
  }
}