[CSS] Animation

CSS에 애니메이션 사용하기 위해서는 animation 속성을 이용해야한다.

 

animation 속성의 하위 속성이 있는데, 아래와 같다.

 

animation-delay : element가 load 되고 나서 언제 애니메이션이 시작될지 지정합니다.

animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.

animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.

animation-iteration-count : 애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.

animation-name : 이 애니메이션의 중간 상태를 지정합니다. 중간 상태는  @keyframes 규칙을 이용하여 기술합니다.

animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있습니다.

animation-timing-function : 중간 상태들의 전환을 어떤 시간 간격으로 진행할지 지정합니다.

animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.

 

가장 중요한 것은 애니메이션이 이루어지기 위해서는 처음-중간-끝의 이미지를 지정해야 자연스럽게 움직임을 보여줄 수 있는데, keyframes이 가장 중요하다. 

 

p {
  animation-duration: 3s;
  animation-name: slidein;   // 1 -- 애니메이션 이름
}

//case1.
@keyframes slidein {  // 2 -- @keyframes 애니메이션 이름 
  from {     // 3 -- 0%로 써도됨 
    margin-left: 100%;
    width: 300%
  }

  to {  // 4 -- 100%
    margin-left: 0%;
    width: 100%;
  }
}

//case2. 
@keyframes slidein {  
  0% {     
    margin-left: 100%;
    width: 300%
  }

  75% {   //중간 상태 추가할 수 있음
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  100% {  
    margin-left: 0%;
    width: 100%;
  }
}