[javascript] CSS animation 속성 (애니메이션)

참고: https://blog.logrocket.com/guide-to-css-animation-for-javascript-developers/

사람의 뇌가 움직임에 특화되어있다는 것은 익히 알려진 사실입니다. 인간은 정적인 요소에 초점을 맞추기보다는 요소가 어떻게 움직이는지에 더 많은 관심을 가집니다.

CSS 애니메이션은 이러한 인간의 행동을 이용합니다. 웹사이트에 애니메이션이 추가되면 제품의 중요한 영역에 사용자의 관심을 끌게되어 지속적인 효과를 낳게되고 사용자 경험을 향상시킵니다.

이 포스트에서는 CSS 애니메이션의 이점, 다양한 CSS 애니메이션 속성, 그리고 자바스크립트 개발자들이 CSS 애니메이션을 사용하여 웹사이트를 보다 상호작용적이고 사용자 친화적으로 만들 수 있는 다양한 예를 알아보겠습니다.

CSS 애니메이션 개요

자바스크립트 개발자로서 CSS 애니메이션을 사용하는 방법을 알아보기 전에, CSS 애니메이션이 정확히 무엇인지, 왜 알아야 하는지, 그리고 그것이 웹사이트의 외관과 느낌에 어떠한 영향을 미치는지 빠르게 알아보겠습니다.

1. CSS 애니메이션이란?

이름에서 알 수 있듯이 CSS 애니메이션을 사용하면 사용자가 특정 시간 동안 CSS 속성의 변경 사항을 지정하는 패턴을 사용하여 특정 CSS 속성을 애니메이션화 하는 것 입니다.

CSS 애니메이션은 하나의 CSS 스타일 구성에서 다른 CSS 스타일 구성으로 전환하는 과정을 애니메이션화 할 수 있게 합니다.

2. CSS 애니메이션을 이해해야 하는 이유

웹 개발 생태계는 자바스크립트 개발자들이 CSS를 이해하고 애니메이션화하는 것을 더이상은 피할 수 없게하는 위치까지 왔습니다. 애니메이션이 없는 사용자 인터페이스는 움직임이 없는 비디오 게임과 같고, 그 누구도 더 이상 텍스트 전용 게임을 하는 것을 좋아하지 않을 것 입니다.

기존보다 더 대화형 웹 사이트를 구축하고 싶어하는 니즈는 CSS 애니메이션으로 해결됩니다.

3. CSS 애니메이션이 웹사이트에 미치는 장점은 무엇인가?

웹 사이트를 열었는데 페이지가 로드되고 있는지 또는 손상되었는지 궁금했던 적이 있습니까? 이러한 공통된 경험은 사용자에게 불만을 유발할 수 있습니다.

CSS 애니메이션을 사용하여 개발자들은 사용자에게 어떤 일이 일어나고 있음을 알리는 로딩 애니메이션을 추가함으로써 이러한 불만을 완화할 수 있습니다.

애니메이션을 잘 활용하면 가치 있는 상호 작용, 개성 및 매력적인 사용자 경험을 웹 사이트 인터페이스에 추가할 수 있습니다.

CSS 애니메이션 설명

애니메이션은 CSS 애니메이션을 설명하는 스타일과 애니메이션 스타일의 순서를 나타내는 키 프레임 두 가지 요소로 구성됩니다.

이러한 구성을 효과적으로 이해하기 위해 두 개의 컴포넌트로 분류해 알아보겠습니다.

1. CSS 애니메이션 스타일

생성하려는 모든 애니메이션에 대해 애니메이션의 특성을 설명해야 합니다. 이렇게 하면 애니메이션이 할 수 있는 것과 할 수 없는 것을 정확하게 결정할 수 있습니다.

구성할 수 있는 속성으로는 애니메이션 지속 시간, 방향 및 애니메이션 반복 횟수가 있습니다.

애니메이션을 만들기 위해 애니메이션 축약 속성 또는 애니메이션 서브 속성을 사용할 수 있습니다.

- animation 축약 속성

animation 속성은 8개의 애니메이션 서브 속성을 축약하여 작성할 수 있습니다. 서브 속성을 일일히 입력하는 데 시간낭비하는 것을 방지하고 8개의 서브 속성이 모두 필요한 요소에 애니메이션을 적용합니다.

.element {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

이 코드를 HTML 요소에 적용하면 animation 속성은 페이지의 요소에 다음과 같은 8개 서브 속성을 모두 사용하여 애니메이션을 적용할 수 있습니다.

See the Pen animation example 1 by shinyks (@shinyks) on CodePen.

- animation 서브 속성

8개의 서브 속성은 실제 animation 속성을 구성하고있고 CSS에서 HTML 요소의 애니메이션을 구성하고있습니다. 이 서브 속성을 따로 쓰는 이유는 동시에 여러가지 속성을 사용하지 않으려는 경우나 animation 속성의 정렬 순서를 잊어버린 경우에 유용합니다.

.element {
  animation-name: name;
  animation-duration: duration;
  animation-timing-function: timing-function;
  animation-delay: delay;
  animation-iteration-count: count;
  animation-direction: direction;
  animation-fill-mode: fill-mode;
  animation-play-state: play-state;
}

다음 예의 코드를 HTML 요소에 적용하면 애니메이션 사각형이 렌더링됩니다.

See the Pen animation example 2 by shinyks (@shinyks) on CodePen.

animation 속성과 animation 서브 속성은 동일한 결과값을 생성하므로 함께 사용할 수 없습니다. 이들은 얻고자 하는 방향에 기초하여 개별적으로 사용해야합니다.

MDN Web Docs에서 더 자세히 알아볼 수 있습니다.

키 프레임 단락으로 넘어가기 전에 CSS 애니메이션을 만들기 위해 스타일을 사용하는 것은 애니메이션의 순서를 나타내는 키 프레임 없이는 작동하지 않는다는 점을 주의해야 합니다.

예를 들면 아래 예제에서는 하트가 뛰는 애니메이션을 만들기 위해 animation-name, animation-duration, animation-timing-function 서브 속성을 사용하였지만 @keyframes 룰이 없기 때문에 실질적인 애니메이션 동작이 일어나지 않습니다.

See the Pen animation example 3 by shinyks (@shinyks) on CodePen.

2. @keyframe을 사용하여 애니메이션 시퀀스 표시

keyframe은 애니메이션 시퀀스에 주어진 시간 동안 애니메이션 요소가 렌더링되는 방법을 설명합니다. 애니메이션의 타이밍은 animation 속성이나 서브속성을 사용하여 CSS 스타일로 정의하도록 되어있고, keyframe은 애니메이션 시퀀스를 백분율로 표현하는데 사용합니다.

키 프레임을 사용하려면 animation-name 속성에 전달된 동일한 이름으로 @keyframes 룰을 만듭니다. heartbeat 데모에서 애니메이션 이름은 heartbeat이므로 @keyframes 룰도 heartbeat로 지정합니다.

각 @keyframes 룰은 키 프레임 선택자의 스타일 목록을 가지고있으며, 키 프레임이 발생할 때 애니메이션의 비율을 지정하고 해당 키 프레임의 스타일을 표시하는 블록을 포함합니다.

@keyframes heartbeat {
  0% {
    transform: scale(1) rotate(-45deg);
  }
  20% {
    transform: scale(1.25) rotate(-45deg);
  }
  40% {
    transform: scale(1.5) rotate(-45deg);
  }
}

0%는 애니메이션 시퀀스의 첫 번째 순간을 나타내고 100%는 애니메이션의 최종 상태를 나타냅니다.

다음의 코드로 @keyframes의 예제를 확인할 수 있습니다.

See the Pen animation example 4 by shinyks (@shinyks) on CodePen.

보는바와 같이 하트가 뛰고있습니다.

전체 애니메이션 시퀀스의 0%에서 40% 동안에 하트 스케일의 크기를 변경하기 위해서는 CSS @keyframes 룰에 다음을 추가해야합니다.

• 시퀀스 진행이 0%일 때는 기본 모습이 보이도록 합니다
• 20% 진행되었을 때는 scale(1.25)를 줘서 하트의 크기를 125%로 확대합니다.
• 40%일 때는 scale(1.5)를 줘서 하트의 크기가 150%로 커지게합니다.

정리

CSS 애니메이션은 자바스크립트 개발자가 사용자들에게 기억에 남을만한 경험을 만드는 데 필요한 도구입니다. 이 포스트에서 모든 코드펜 CSS 애니메이션 데모를 찾을 수 있습니다.

관련 글

자바스크립트 스프라이트 애니메이션

CSS transition 애니메이션