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

CSS3에서는 엘리먼트의 현재 스타일을 다른 스타일로 부드럽게 전환시켜주는 애니메이션 기능을 구현하기 위한 별도의 문법을 제공하고 있다. 이는 JavaScript를 사용하지 않기 때문에 JavaScript를 몰라도 애니메이션을 구현할 수 있다는 장점을 가지며, 무엇보다 JavaScript를 사용하여 구현한 애니메이션보다 성능적으로 최적화가 잘 되어 있다는 특징이 있다. 이러한 애니메이션은 이름이 animation-으로 시작하는 속성을 사용하여 구현할 수 있으며, 애니메이션의 시작과 끝을 포함하여 중간의 특정 시점에 엘리먼트가 어떤 모습을 가져야 하는지에 대한 정보를 담은 @keyframes라는 별도의 규칙을 직접 정의하여 사용하게 된다.

 

1. animation-name 속성

애니메이션 과정의 각 시점에 어떤 스타일을 설정해줄지 지정한다. 이를 위해서는 먼저 @keyframes라는 별도의 규칙을 직접 정의해줘야 한다. 기본값은 none이다. @keyframes 규칙을 정의하는 방법과 관련해서는 아래에서 다시 자세히 설명하도록 하겠다.

 

2. animation-delay 속성

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

 

3. animation-iteration-count 속성

애니메이션이 몇 번 반복될지(= 사이클 개수) 지정한다. 기본값은 1이다.

 

• <number> : 애니메이션을 <number>회 실행한다.
• infinite : 애니메이션을 무한히 반복하여 실행한다.

 

4. animation-direction 속성

애니메이션이 진행되는 방향을 지정한다. 기본값은 normal이다.

 

• normal (기본값) : 애니메이션이 매 사이클마다 정방향으로 진행된다.
• reverse : 애니메이션이 매 사이클마다 역방향으로 진행된다.
• alternate : 애니메이션이 매 사이클마다 방향을 뒤집되, 첫 번째 방향은 정방향이다. (단, animation-iteration-count 속성의 값이 2 이상일 때만 의미가 있다.)
• alternate-reverse : 애니메이션이 매 사이클마다 방향을 뒤집되, 첫 번째 방향은 역방향이다. (단, animation-iteration-count 속성의 값이 2 이상일 때만 의미가 있다.)

 

5. animation-duration 속성

한 사이클의 애니메이션이 얼마의 시간에 걸쳐 일어날지 지정한다. 값에는 (0이 아닌 이상) 시간 단위(s 혹은 ms)를 반드시 명시해줘야 하며, 음수 값은 사용할 수 없다. 기본값은 0으로, 애니메이션이 작동되지 않음을 의미한다.

 

6. animation-play-state 속성

애니메이션의 현재 상태(실행 혹은 중단)를 지정한다. 이를 통해 해당 애니메이션을 멈추거나 다시 시작할 수 있다. 기본값은 running이다.

 

• running (기본값) : 애니메이션을 진행 중 상태로 지정한다.
• paused : 애니메이션을 중단 상태로 지정한다.

 

7. animation-timing-function 속성

한 사이클의 애니메이션이 어떠한 경향성을 띄며 진행되어야 할지 지정한다. 즉, 애니메이션 과정의 중간 시점 모습들이 어떻게 전환되어야 하는지 지정한다. 여러 개의 설정이 존재하지만 여기서는 대표적인 두 가지 설정만 알아보도록 한다. 기본값은 ease이다. 자세한 설정은 MDN 사이트에서 확인하도록 하자.

 

• ease (기본값) : 애니메이션의 진행이 중간까지는 빨라지다가 그 이후부터는 다시 느려진다.
• linear : 애니메이션이 일정한 속도로 진행된다.

 

8. animation-fill-mode 속성

애니메이션이 시작되기 전과 끝나고 난 후 어떠한 모습이 될지 지정한다.

 

• none (기본값) : 애니메이션이 실행되는 순간에만 스타일이 적용된다.
• forwards : 애니메이션의 실행이 끝나고 나면 애니메이션의 마지막 모습을 유지한다.
• backwards : 애니메이션이 실행되기 전부터 애니메이션의 시작 모습으로 대기한다(animation-delay의 시간 동안).
• both : forwards와 backwards의 옵션을 동시에 적용한다.

 

9. @keyframes 규칙 ***

@keyframes 규칙을 정의할 때는 최소 두 개의 중간 상태를 기술해줘야 한다. 최소한 애니메이션의 시작과 끝에는 엘리먼트가 어떤 스타일을 가져야 하는지 알려줘야 하기 때문이다. 0% 혹은 from은 애니메이션이 시작되는 시점을, 100% 혹은 to는 애니메이션이 끝나는 시점을 의미한다. 그리고 시작과 끝 사이의 중간 시점도 퍼센트로 표현이 가능하다(EX. 70%).

div {
    width: 100px;
    height: 0;
    
    animation-duration: 3s;
    animation-name: slideDown;
}

@keyframes slideDown {
    from {
    	height: 0;
    }
    
    75% {
        height: 75px;
    }
    
    to {
        height: 100px;
    }
}

 

 

 

 

 

 

본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations