[CSS] animation 1회만 실행

 

CSS 애니메이션은 기본값이 반복이다.

 

CSS 애니메이션을 1회만 실행하도록 만드는 방법은 다음과 같습니다.

 

animation-iteration-count 속성을 1로 설정합니다.

animation-iteration-count 속성을 1로 설정합니다.

 

animation-fill-mode 속성을 forwards로 설정합니다. 이렇게하면 애니메이션이 종료될 때 마지막 상태를 유지합니다.

animation-fill-mode: forwards;

 

사용 예

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: myAnimation 1s forwards; //mode사용예
  //animation: myAnimation 1s 1; //count사용예
}

@keyframes myAnimation {
  0% { transform: scale(1); }
  100% { transform: scale(1.5); }
}