[CSS3] 애니메이션(animation), 키프레임(@keyframes)

---

알고있으면 좋은 CSS3 Tip✨

---

애니메이션(animation)

• CSS3에서는 엘리먼트의 현재 스타일을 다른 스타일로 부드럽게 전환시켜주는 애니메이션 기능을 구현하기 위한 별도의 문법을 제공하고 있다.
• JavaScript를 사용하여 구현한 애니메이션보다 성능적으로 최적화가 잘 되어 있다.

 

(1) animation-name

• 애니메이션의 중간 상태를 지정하기 위한 이름을 정의한다. 중간 상태는 @keyframes 규칙을 이용하여 기술한다.
• 이름을 설정해야 애니메이션을 재생할 수 있다.

animation-name: name; /* 문자열로 시작하는 이름 */
animation-name: _name; /* 언더바(_)로 시작하는 이름 */
animation-name: -name; /* 하이픈(-)으로 시작하는 이름 */

 

(2) animation-duration

• 애니메이션을 한 번 재생하는 데 걸리는 시간을 설정할 수 있으며,transition-duration 과 유사하다.
  
• 값에는 (0이 아닌 이상) 시간 단위(s 혹은 ms)를 반드시 명시해줘야 하며, 음수 값은 사용할 수 없다.
• 기본값은 0으로, 애니메이션이 작동되지 않음을 의미한다.

 

(3) animation-delay

• 애니메이션이 적용되고 나서 얼마의 시간 뒤에 해당 애니메이션이 시작될지 지정한다.
• 이때 애니메이션이 적용되는 시점이란 animation- 속성이 스타일로 지정되는 시점을 말하므로, 최초 마운트 순간뿐 아니라 클래스명의 변경 혹은 JavaScript로 인해 동적으로 animation- 속성이 스타일로 지정되는 순간에도 애니메이션이 시작될 수 있다.
• 값에는 (0이 아닌 이상) 시간 단위(s 혹은 ms)를 반드시 명시해줘야 한다. 만약 여기에 음수 값을 지정하면 애니메이션이 적용되는 즉시 시작되지만 애니메이션 과정의 중간부터 시작된다. 기본값은 0이다.

 

(4) animation-direction

• 애니메이션이 진행되는 방향을 지정한다. 기본값은 normal이다.
  1. normal : 애니메이션을 순방향으로 재생한다(기본값). 재생이 한 번 끝나면 첫 번째 프레임부터 다시 시작한다.
  2. alternate : 순방향으로 애니메이션을 시작해 역방향과 순방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 순방향으로 재생하고, 짝수 번째로 재생할 때는 역방향으로 재생한다.
  3. reverse : 애니메이션을 역방향으로 재생한다. 재생이 한 번 끝나면 마지막 프레임부터 다시 시작한다.
  4. alternate-reverse : 역방향으로 애니메이션을 시작해 순방향과 역방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 역방향으로 재생하고, 짝수 번째로 재생할 때는 순방향으로 재생한다.

 

(5) animation-iteration-count

• 애니메이션을 재생하는 횟수를 정의하는 속성이다.
  1. 숫자 : 기본값은 1이며, 설정한 횟수만큼 애니메이션을 재생한다.
  2. infinite : 애니메이션을 무한으로 반복한다.

 

(6) animation-play-state

• 애니메이션 재생 여부를 정의하는 속성이다.
  1. running  : 애니메이션을 재생한다.(기본값)
  2. paused : 애니메이션을 정지한다.

 

(7) animation-timing-function

• 한 사이클의 애니메이션이 어떠한 경향성을 띄며 진행되어야 할지 지정한다.
• 즉, 애니메이션 과정의 중간 시점 모습들이 어떻게 전환되어야 하는지 지정한다.

 

@keyframes

• 애니메이션을 재생할 각 프레임의 스타일을 정의하는 것으로 from 속성이나 0% 속성에 설정한 스타일에서 출발해 to 속성이나 100% 속성에 설정한 스타일로 점차 바뀌면서 애니메이션이 재생된다.
• 키프레임은 애니메이션을 적용할 요소의 animation-name 을 정의하고 그 키프레임 코드 블럭에 재생할 프레임별 시간 비율을 작성한다.

@keyframes animationName {
    from {
        css-styles;
    }
    to {
        css-styles;
    }
}

• from : 애니메이션의 시작 프레임이다. 0% 와 같다.
• to : 애니메이션의 마지막 프레임이다. 100% 와 같다.

@keyframes move {
    0% {
        top: 0px;
    }
    25%{
        top: 20px;
    }
    75%{
        top: 175px;
    }
    100%{
        top: 200px;
    }
}

• 0% : 애니메이션의 시작 프레임
• 100% : 애니메이션의 마지막 프레임

 

transition VS animation 차이

• transition 속성과 animation 속성은 플래시의 기술이나 자바스크립트의 도움 없이 요소에 직접 애니메이션 효과를 적용하는 속성이며, 요소의 상태가 변해야 애니메이션을 실행한다.
• 반면 animation 속성은 요소의 모양과 동작을 키프레임 단위로 변경할 수 있으며, 키프레임 동작은 재생 횟수, 재생 방향등 여러 애니메이션 속성으로 제어할 수 있다.