CSS animation 핵심 정리, 사용법

 

CSS animation 핵심을 요약하고 사용법을 정리해보겠습니다.

 

animation은 UI를 동적으로 표현하는데 쓰이기도 하고, 사이트의 브랜드나 핵심적인 시각 요소를 돋보이게 하는 효과도 있습니다.

 

이번 글에서는 애니메이션을 어떻게 사용하고, 설정할 수 있는 메소드들은 어떤 것들이 있는지 알아보겠습니다.

 

 

 

 

animation 축약

 

background나 matrix처럼 관련된 메소드들을 한꺼번에 적을 수 있는 메소드입니다.

 

matrix는 transform에 속한 메소드인데, 이동하고 회전하는 등의 transform 메소드들을 animaiton에 사용할 수 있으니 참고해보세요.

 

CSS transform 요약 정리

 

aniamtion은 애니메이션과 관련된 속성을 축약해서 쓸 수 있으며, 요소에 적어서 같은 애니메이션 이름을 적은 @keyframes와 연결시켜줌으로서 애니메이션이 재생됩니다.

 

div{animation: 애니메이션 이름, 재생시간, 등등..;}

@keyframes 애니메이션 이름{애니메이션 설정값;}

 

 많은 애니메이션 메소드들 중에서도 animation-name, @keyframes, animation-duration은 필수이므로 꼭 적어야 합니다.

 

 

그럼 이제 animation{} 안에 축약해서 쓸 수 있다는 것을 알았으니, 안에 어떤 설정값들을 쓸 수 있는지 알아보겠습니다.

 

 

animation을 설정하는 메소드들

 

다음과 같이 애니메이션을 설정할 수 있는 다양한 메소드들이 있습니다.

 

1. 필수로 적어야 하는 것들

 

• animation-name : 애니메이션의 이름이며 애니메이션을 적용할 요소에 적습니다.
• @keyframes : 애니메이션 이름을 뒤에 적으면 애니메이션을 적용할 요소와 연결됩니다.
• animation-duration : 애니메이션 효과를 재생할 시간입니다. 기본값은 0초이므로, 재생할 시간을 적어야 재생이 됩니다. 

 

2. 프레임 나누기

 

from, to 또는 0%~100%로 애니메이션의 시작과 끝, 시간의 프레임을 나눌 수 있습니다.

 

그러면 시작할 때와 끝날 때의 애니메이션 또는 프레임마다 원하는 애니메이션을 설정할 수 있습니다.

 

앞서 설명한 @keyframes{} 괄호 안에 씁니다. 

 

/* from, to로 시작과 종료 나누기 */

div{animation: moving, 3s;}

@keyframes moving{
    from { margin-left: 100%;}
    to { margin-left: 0%;}
}

/* %로 프레임 나누기 */

div.div2{animation: moving2, 3s;}

@keyframes moving2{
    0% {border-color: red;}
    50% {border-color: green;}
    100% {border-color: purple;}
}

 

 

3. 움직이는 느낌

 

animation-timing-function으로 움직이는 느낌을 설정할 수 있습니다.

 

ease, ease-in, ease-out,  ease-in-out, linear, step-start, step-end 등으로 설정할 수 있습니다.

 

linear은 일정한 속도로 움직이는 것이고, ease는 가속도와 관성이 있게 움직이는 것입니다. step은 단계적으로 딱, 딱, 딱 움직입니다.

 

step: (6, end); 이런 식으로 소괄호 안에 단계와 시작 지점에서 반복할지 종료 지점에서 반복할지 정해줍니다.

 

 

4. 시작 지연하기

 

animation-delay에 음수와 양수를 적어, 애니메이션이 시작될 시간을 설정할 수 있습니다.

 

 

5. 반복하기

 

animation-iteration-count에 숫자를 적어 애니메이션이 반복될 횟수를 정할 수 있습니다. infinite를 적으면 영원히 반복됩니다.

 

 

6. 시작 방향 정하기

 

animation-direction에 normal, reverse, alternate, alternate-reverse로 시작 방향을 정할 수 있습니다.

 

alternate는 애니메이션이 반복될 때 시작지점(A)에서 시작하지 않고, 끝지점(B)에서 다시 시작해서 자연스럽게 보입니다.

 

 

7. 종료 지점 정하기

 

animation-fill-mode에 none, forwards, backwards, both로 종료 지점을 설정할 수 있습니다.

 

• none이나 backwards로 하면 시작 지점에서 멈춥니다.
• forwards로 설정하면 종료 지점에서 멈춥니다.
• both로 설정하면 처음 시작으로 돌아가 멈추게 됩니다.

 

8. 일시 정지하기

 

animation-play-state에 running과 pause를 쓰면 애니메이션이 재생, 일시정지가 됩니다.

 

마우스를 올리면 멈추는 등의 효과를 줄 때 유용하게 쓰일 수 있습니다.

 

 

이상으로 CSS animation 요약 정리를 마치겠습니다.

 

더욱 자세한 애니메이션 메소드에 대한 설명과 예시는 MDN 애니메이션 페이지를 참고하시면 되겠습니다. 읽어주셔서 감사합니다.