css animation

애니메이션과 트랜지션의 차이부터 짚고 넘어가자. transiton은 속성의 값이 변화할 때 적용 하는 반면, animaiton은 그냥 효과를 줄 때 적용한다. 즉, 애니메이션이 트랜지션에 비해 자유도가 크다고 할 수 있다. 애니메이션은 조금 특히하게 @keyframes 를 사용해서 애니메이션을 정의한다.

@keyframes move-box {
  /* 변화해야 하는 속성 */
  from {
    top: 0;
    background-color: #0066ff;
  }
  to {
    top: 200px;
    background-color: #ff4949;
  }
}

.box {
  ...
  animation-name: move-box;
  animation-duration: 2000ms;
  animation-timing-function: ease-in-out;
  /* animation-delay: 1000ms; */
  animation-iteration-count: 3;
  /* animation-iteration-count: infinite; */
  animation-direction: alternate;
}

• animation-name: move-box;: 사용할 애니메이션을 지정
• animation-duration: 2000ms;: 애니메이션 동작 시간
• animation-timing-function: ease-in-out;: 애니메이션 시간 함수 적용
• animation-iteration-count: 3;: 애니메이션 반복 횟수
• animation-iteration-count: infinite;: 무한으로 반복할 수 도 있음
• animation-direction: alternate;: 애니메이션의 적용 방향을 reverse 시킴
  - ex) 이미지가 내려가는 방향의 애니메이션이 있다면 reverse로 올라오게 한다.
  • 즉, 내려갔다가 올라가는 액션이 iteration-count 만큼 반복