JavaScript 개발자 CSS 애니메이션 안내서

작성자Edidiong Asikpo✏️
인간의 뇌는 천성적으로 운동에 적합하다는 충분한 증거가 있다.인류는 정적 원소보다 원소가 어떻게 이동하는지에 더 관심을 가질 수 있다.
CSS 애니메이션은 이러한 인간 행동을 활용합니다.애니메이션이 사이트에 추가될 때 사용자의 주의력을 제품의 중요한 분야로 끌어들여 지속적인 효과를 내고 체험을 강화한다.
본고에서 우리는 CSS 애니메이션의 장점, 서로 다른 CSS 애니메이션 속성, 그리고 자바스크립트 개발자가 CSS 애니메이션을 사용하여 사이트를 더욱 상호작용적이고 사용자 친선성을 가지게 하는 서로 다른 예를 되돌아볼 것이다.
이 예들 중 하나는 하나의 코드pen 설명과 상세한 해석을 수반하여 이 예들을 더욱 현실적이고 실용적이며 정보가 풍부하게 할 것이다.

CSS 애니메이션 개요

자바스크립트 개발자로서 CSS 애니메이션을 어떻게 사용하는지 깊이 있게 이해하기 전에 CSS 애니메이션이 도대체 무엇인지, 왜 그것을 이해해야 하는지, 그리고 사이트의 외관과 느낌에 어떤 영향을 미치는지 살펴보자.

CSS 애니메이션이란?

말 그대로 CSS animation allows users to animate some CSS properties는 성명성 모델에 따라 사용자가 CSS 속성의 일정 시간 변화를 지정할 수 있다.
CSS 애니메이션을 사용하면 한 CSS 스타일 구성에서 다른 CSS 스타일 구성으로 애니메이션을 변환할 수 있습니다.

왜 당신은 CSS 애니메이션을 이해해야 합니까

웹 개발 생태계는 이미 고도JavaScript developers can’t avoid understanding and animating CSS까지 발전했다.애니메이션이 없는 사용자 인터페이스는 운동이 없는 비디오 게임과 같아서 순수한 텍스트 게임을 더 이상 좋아하는 사람이 없다!
CSS 애니메이션은 더 많은 상호작용 사이트를 구축하는 수요를 만족시켰다.

CSS 애니메이션은 사이트에 어떤 긍정적인 영향을 줍니까?

당신은 웹 사이트를 본 적이 있습니까? 웹 페이지가 불러오고 있는지 파괴되고 있는지 알고 싶습니까?이런 흔한 체험은 그것을 만난 사용자들을 낙담하게 할 수도 있다.
CSS 애니메이션을 사용하면 개발자는 애니메이션을 불러와서 이런 좌절감을 줄일 수 있다. 이 애니메이션은 사용자에게 발생하는 일의 신호를 보내서 페이지에 더 오래 머무르게 한다.
만약에 잘하면 애니메이션은 사이트 인터페이스에 가치 있는 상호작용, 개성과 사람을 끌어당기는 사용자 체험을 추가할 수 있다.

Animations can make UI elements resemble the real world, making them smoothly change while giving the feeling of continuity, action, and progress instead of changing in a blink of an eye. — Patrícia Silva, “How to Make CSS Animations”

CSS 애니메이션 설명

애니메이션은 CSS 애니메이션의 스타일을 설명하고 애니메이션의 스타일 시퀀스를 나타내는 키프레임으로 구성됩니다.
효과적으로 이해하기 위해서 이 두 부분을 분해합시다.

CSS 애니메이션 스타일 설명하기

생성된 각 애니메이션에 대해 애니메이션의 피쳐를 설명해야 합니다.이것은 애니메이션이 무엇을 할 수 있는지, 무엇을 할 수 없는지를 완전히 제어할 수 있게 한다.
애니메이션의 기간, 방향 및 반복 횟수를 포함하여 구성할 수 있는 일부 특성 예가 있습니다.
애니메이션을 설명하려면 animation 속성 또는 animation 하위 속성을 사용합니다.

애니메이션 메모 속성

animation 속기 속성은 8animation 하위 속성의 속기이다.하위 특성 이름을 입력하는 데 시간을 낭비하지 않도록 하고 모든 8개의 하위 특성이 필요한 요소에 애니메이션을 설정합니다.

/* Here’s the syntax of the animation shorthand property */
.element {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

이 코드를 요소에 적용하면 animation 속기 속성은 페이지의 요소에 대해 다음과 같은 8개의 하위 속성을 사용하여 애니메이션을 설정합니다.

애니메이션 하위 속성

이 8개의 하위 속성은 실제 animation 속기 속성을 구성하고 CSS에서 요소의 애니메이션을 구성합니다.이 옵션은 모든 하위 특성을 동시에 사용하지 않거나 애니메이션 특성에서 정렬 순서를 잊어버리는 경우에 유용합니다.

/* Here’s the syntax of the animation sub-properties. */
.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;
}

마찬가지로 요소에 코드를 적용하면 애니메이션의 사각형이 렌더링됩니다.
같은 내용을 생성하기 때문에 animation 속기 속성과 animation 하위 속성을 동시에 사용할 수 없습니다.그것들은 반드시 네가 실현하고자 하는 목표에 따라 단독으로 사용해야 한다.
당신은 each sub-property and its value in the MDN Web Docs에 대한 더 많은 정보를 얻을 수 있습니다.
키프레임에 들어갈 때 애니메이션 시퀀스를 나타내는 키프레임이 없으면 스타일로 CSS 애니메이션을 설명할 수 없다는 것을 알아야 합니다.
예를 들어 아래의 시연은 animation-name, animation-duration와 animation-timing-function 하위 속성을 포함하는데 이것은 심장 박동 신호를 구성해야 한다.
그러나 @keyframes at rule 속성이 구성되지 않았기 때문에 심장에서 애니메이션을 볼 수 없습니다.

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

키프레임은 애니메이션 요소가 애니메이션 시퀀스에서 지정된 시간에 렌더링되는 방법을 설명합니다.애니메이션의 타이머는 CSS 스타일에서 animation 대표 속성 또는 하위 속성으로 정의되므로 키프레임은 비율을 사용하여 애니메이션 시퀀스를 나타냅니다.
키프레임을 사용하려면 @keyframes 속성에 전달된 동일한 이름으로 animation-nameat 규칙을 만듭니다.하트비트 프레젠테이션에서 animation-name 는 heartbeat 이기 때문에 @keyframes 를 규칙 heartbeat 으로 명명해야 합니다.
각 @keyframesat 규칙에는 키프레임 선택기의 스타일 목록이 있으며, 키프레임이 나타날 때 애니메이션의 백분율과 키프레임 스타일이 포함된 블록을 지정합니다.

@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에 대해 잘 알았으므로 심장 시연에 포함시켜 어떤 변화가 있는지 살펴보겠습니다.
보시다시피 심장이 뛰고 있어요!
심장 눈금의 크기를 @keyframes에서 0%까지로 설정하려면 규칙에 CSS40%를 추가합니다.

0% 시간 변환 없음

scale(1.25)를 통해 심장을 초기 크기의 125%로 축소하는 데 걸리는 시간의 20%

40%의 시간scale(1.5)을 통해 심장 초기 크기의 150% 축소

추가rotate(-45deg)는 CSS로 만든 심장의 원래 방향을 유지하기 위한 것입니다.

JavaScript 개발자의 애니메이션 예

이 절에서는 두 JavaScript 개발자가 CSS 애니메이션을 사용하여 웹 사이트를 더욱 상호작용하고 사용자 체험을 개선할 수 있는 예시를 살펴보겠습니다.

표를 작성하다

표는 거의 모든 사이트에서 볼 수 있는 구성 요소이다.통상적으로 온라인 양식에 기입하는 것은 매우 지루할 것이다.
이 예에서는 로그인 양식을 보고 JavaScript를 사용하여 애니메이션을 제어하여 웹 사이트가 사용자에게 어떻게 상호작용을 할 수 있는지 이해할 수 있습니다.사용자가 다음 로그인 양식에 전자 메일 주소와 암호를 추가하려고 하면 양식에 애니메이션이 적용되지 않습니다.
애니메이션이 없는 폼은 충분히 가능하지만 시각적으로 사용자에게 매력이 없기 때문에 그들의 주의를 끌지 못할 가능성이 높다.
그러나 다음 애니메이션 로그인 페이지에서 사용자가 정보를 입력하기 시작하면 전자 메일 및 암호 필드의 문자가 동시에 위로 이동합니다.
비록 이것은 미묘한 애니메이션이지만 사용자의 주의를 끌었고 다음과 같은 방식으로 그들의 체험을 개선했다.

사용자가 입력 필드를 눌렀음을 표시한다

사용자가 입력을 시작할 수 있음을 알 수 있음

이것은 더욱 사용자 친선적인 환경을 만들어 인상적이고 사람들의 주목을 끌 수 있다.

스크롤하여 페이지 탐색

사용자가 애니메이션을 설정하지 않은 사이트에서 스크롤할 때, 그들은 종종 중요한 정보를 놓칠 수 있다.
한 페이지에는 정적 요소가 있고 다른 페이지에는 애니메이션 요소가 있는 두 페이지를 스크롤하여 보겠습니다.
애니메이션은 두 번째 목록에서 왼쪽에서 오른쪽으로 내용을 표시하기 때문에 사용자의 읽기 속도를 낮추어 애니메이션이 없는 첫 페이지와 달리 모든 옵션을 읽을 수 있도록 합니다.사용자가 끝까지 스크롤해서 사용할 수 있는 모든 정보를 볼 수 있도록 도와줄 수도 있다.
친구, 이것이 바로 사이트에 애니메이션을 추가하는 힘입니다!

애니메이션 영감이 필요합니까?

다음은 CSS 애니메이션을 사용하여 사용자에게 더 나은 경험을 제공하는 다섯 회사의 목록입니다.만약에 이 사이트들을 훑어보면 상호작용이 매우 매력적이어서 페이지의 끝까지 스크롤하거나 페이지의 어떤 CTA와 상호작용을 할 수 있다.

GitHub

Species in Pieces

Lava

Netlify

Sequoir

물론 이들 사이트는 세계에서 유일하게 CSS 애니메이션을 사용하는 사이트가 아니지만 이 다섯 개의 사이트는 당신에게 필요한 영감을 줄 수 있다.

결론

한 마디로 하면 자바스크립트 개발자로서 CSS 애니메이션은 사용자에게 잊을 수 없는 체험을 만드는 데 필요한 도구이다.너는 모든 것을 찾을 수 있다Codepen animated CSS demos in this post here.
만약 당신에게 어떤 문제가 있으면 아래의 평론 부분에서 공유해 주십시오. 나는 모든 평론에 대답할 것입니다.

당신의 앞부분이 사용자의 CPU를 차지합니까?

웹 전단이 갈수록 복잡해지면서 자원 탐욕의 기능이 브라우저에 대한 요구가 점점 높아지고 있다.프로덕션 중인 모든 사용자의 클라이언트 CPU 사용률, 메모리 사용률 모니터링 및 추적에 관심이 있는 경우 LogRocket하십시오.

LogRocket 인터넷 응용 프로그램의 DVR처럼 인터넷 응용 프로그램이나 사이트에서 발생하는 모든 것을 기록한다.문제의 원인을 추측할 필요가 없습니다. 관건적인 전단 성능 지표를 집합하고 보고하며, 사용자 세션과 응용 프로그램 상태를 재생하고, 네트워크 요청을 기록하며, 모든 오류를 자동으로 표시할 수 있습니다.
웹 응용 프로그램을 디버깅하는 방식을 현대화Start monitoring for free하다.