애니메이션 속성 - animation-iteration-count, animation-direction

animation-iteration-count

애니메이션의 반복 횟수를 설정

값	의미	기본값
숫자	반복 횟수를 설정	1
infinite	무한 반복	숫자를 작성하지않음

 

 

 

animation-direction

애니메이션의 반복 방향을 설정

값	의미	기본값
normal	정방향만 반복	normal
reverse	역방향만 반복
alternate	정방향에서 역방향으로 반복(왕복)
alternate-reverse	역방향에서 정방향으로 반복(왕복)

 

 

**주의사항***

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
  margin:30px;
  animation: movemove 2s;
  animation-timing-function: linear;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

@keyframes movemove{
  0%{
    transform: translate(0, 0);
  }
  25%{
    transform: translate(100px, 0);
  }
  50%{
    transform: translate(100px, 100px);
  }
  75%{
    transform: translate(0, 100px);
  }
  100%{
    transform: translate(0, 0);
  }
}

만약에 alternate을 사용하고 작동하는걸 보고싶으면 최소한 2이상의 animation-iteration-count를 넣어줘야 한다. 왜냐하면 애니메이션은 한번작동을 하면 정방향만 작동해도 count가 1이 되기 때문에 역방향 출력도 보고싶다면 2이상을 입력해줘야한다.