CSS3로 동적 변화를 만들어보자 - 3. Animation

CSS3로 만들어 낼 수 있는 동적 변화는 transform(변환), transition(전환) 그리고 animation(애니메이션)이다.

Animation

HTML 태그의 모양 변화를 transition과는 다르게 시간 단위를 설정하여 쉽게 애니메이션 효과를 만들 수 있다. 시간비율은 %나 from, to로 표현한다. from은 시작 부분을 의미하고 to는 마지막 지점을 의미한다. %로 표현할 경우 0%가 시작부분, 100%가 마지막 부분을 뜻한다. animation의 경우에는 애니메이션의 유지관리가 쉬워지고 유동적이게 된다는 장점이 있지만, animation으로 표현가능한 부분이 많아지면서 css의 코드 관리가 힘들어진다는 단점이 있다.

• @keyframes 이름 {
  시간비율{스타일}
  시간비율{스타일}
  }

애니메이션을 적용할 HTML태그에 애니메이션 스타일 시트를 작성해야 한다. animation도 한 줄로 적을 수 있긴 하지만 항목이 많다 보니 다 기억하기 어렵다. 

• animation-name: 애니메이션 이름;
  @keyframes에서 지정한 애니메이션 이름을 작성해준다.
  
  
• animation-duration: 시간;
  애니메이션 지속 시간을 설정한다.
  
  
• animation-iteration-count: 반복횟수;
  애니메이션을 몇 번 반복할건지 설정할 수 있다. 무한으로 반복하고 싶은 경우에는 infinite를 사용한다. 
  
  
• animation-fill-mode: none | forwards | backwards | both;
  애니메이션이 끝난 후에 상태를 지정한다. forwards의 경우 애니메이션이 끝났을 때의 상태를 그대로 유지하고, backwards의 경우 애니메이션이 끝난 후 시작지점으로 돌아오고, both는 애니메이션의 앞뒤 결과를 조합하여 중간값으로 지정한다. 
  
  
• animation-direction : normal | reverse | alternate | alternate-reverse;
  애니메이션을 실행할 때 시작부분부터 시작할지, 끝부분부터 시작할지에 대해 설정할 수 있다. alternate와 alternate-reverse의 경우 애니메이션을 왕복해야하기 때문에 재생횟수가 2회 이상이어야지만 발동할 수 있다.
   
• animation-play-state: running | paused; 
  애니메이션의 실행 혹은 일시정지를 지정할 수 있다. 이 기능을 사용하면 마우스를 올렸을 때 애니메이션을 멈추는 효과를 지정할 수 있다. 
  
  
• animation-timing-function: 값;
  transition-timing-function과 동일한 값을 사용하여 애니메이션 시간이 처음부터 끝까지 동일하게 흘러가게할지 아니면 다르게 흘러가게 할지 여부를 정할 수 있다.