【CSS】@keyframesでアニメーション完了後の状態で停止する方法

2018年5月8日2019年6月12日CSS,CSSアニメーション

CSSanimationプロパティによる@keyframesのデフォルト設定では、アニメーション完了後、元に戻る様になっています

拡大縮小や変色など@keyframesのtoや100%時点でアニメーションを停止させるには「animation-fill-modeプロパティ」で「forwards」を指定する必要があります

アニメーション完了後の状態で停止する方法

「animation-fill-mode:forwards」を個別指定

animation-fill-mode:forwards;

「animation」での一括指定

animation: keyName 1s ease-out forwards;

アニメーション完了後の状態で停止する動作サンプル

サンプル1はanimation-fill-modeを未指定、サンプル2ではanimation-fill-modeでforwardsを指定しています

See the Pen CSS animation-fill-mode forwards by yochans (@yochans) on CodePen.

HTML

<p class="item sample1">Zoom In</p>
<p class="item sample2">Zoom In</ps

CSS

.item{
  width:100px;
  margin:30px;
  padding:10px;
  background:#000;
  color:#FFF;
  text-align:center;
}

/*animation-fill-modeは未指定*/
.sample1:hover{
animation: keyName 1s ease-out;
}

/*animation-fill-modeでforwards指定*/
.sample2:hover{
animation: keyName 1s ease-out forwards;
}

@keyframes keyName{
  100% {
  background:#1565C0;
  }
}