@keyframesとanimationプロパティ

アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法。@keyframesではアニメーションのみを指定し、animationプロパティで適用するアニメーションやアニメーションの時間などを指定する。

@keyframes sampleAnime {
  0% {
    width: 50px;
  }
  100% {
    width: 100px;
  }
}
animation: sampleAnime 0.9s linear 500ms 1;