React와 함께 사용하는 CSS 키프레임 애니메이션

@keyframes 규칙은 시간 순서상의 지점에서 속성 값을 지정하여 여러 단계의 애니메이션을 설명합니다. from/to를 사용하거나 0%, 50%, 100%와 같은 백분율을 사용할 수 있습니다.

전환과 달리 키프레임은 각 단계마다 상태를 변경하지 않아도 스스로 실행되는 복잡한 다단계 움직임을 설명할 수 있습니다.

animation 속성을 사용하여 키프레임 집합을 적용합니다. animation: slideIn 400ms ease forwards처럼 작성하며, 이름과 지속 시간, 시간 조절 함수, 채우기 모드를 한데 묶습니다.

forwards 채우기 모드를 사용하면 애니메이션이 끝난 뒤에도 요소가 마지막 키프레임의 값을 유지하므로 시작 상태로 튀어 돌아가지 않습니다.

리액트에서는 일반적으로 상태가 참이 될 때 animation 선언을 포함한 클래스를 추가합니다. 예를 들어 is-entering을 추가하면 요소가 마운트되는 순간이나 플래그가 전환되는 순간 키프레임이 시작됩니다.

이렇게 하면 애니메이션 로직은 CSS에 두고, 리액트는 클래스를 언제 연결할지만 결정할 수 있습니다.

animation-fill-mode는 애니메이션이 실행되기 전과 후에 어떤 스타일을 적용할지 결정합니다. forwards는 마지막 키프레임을 유지하고, backwards는 지연 시간 동안 첫 번째 키프레임을 적용하며, both는 두 동작을 모두 수행합니다.

forwards가 없으면 페이드인 상태로 애니메이션되는 요소가 애니메이션이 끝나는 순간 다시 보이지 않는 상태로 튀어 돌아갑니다.

animation-direction: alternate는 반복할 때마다 애니메이션을 정방향으로 재생한 뒤 역방향으로 재생합니다. animation-iteration-count: infinite와 함께 사용하면 맥박이 뛰거나 숨을 쉬는 듯한 부드러운 왕복 효과를 만들 수 있습니다.

로딩 표시기나 은은하게 시선을 끄는 움직임에 유용합니다.

animation-play-state는 running 또는 paused일 수 있습니다. 예를 들어 클래스를 전환하여 마우스를 올렸을 때 흐르는 텍스트 애니메이션을 일시 중지하는 식으로 리액트 상태에서 제어할 수 있습니다.

애니메이션을 초기화하는 대신 일시 중지하므로, 정확히 중단된 지점부터 다시 시작됩니다.

키프레임 애니메이션은 클래스를 처음 적용할 때 한 번만 재생되며, 같은 클래스를 다시 추가해도 재시작되지 않습니다. 가장 깔끔한 리액트 방법은 요소의 key를 변경하여 리액트가 새로운 노드를 다시 마운트하게 만드는 것입니다. 그러면 애니메이션이 처음부터 다시 재생됩니다.

예를 들어 토스트 알림에 key={count}를 지정하면 count가 증가할 때마다 토스트 알림이 다시 마운트됩니다.

일부 사용자는 편안함이나 접근성을 위해 OS에서 모션 감소를 활성화합니다. 중요하지 않은 애니메이션을 @media (prefers-reduced-motion: reduce)로 감싸고, 그 안에서 애니메이션을 비활성화하거나 짧게 줄이십시오.

이 설정을 존중하면 인터페이스가 더 많은 사용자를 포용하고 불편함을 유발하는 일을 피할 수 있습니다.

요소가 뷰포트에 들어올 때 애니메이션을 실행하려면 useEffect에서 IntersectionObserver를 사용하십시오. 관찰 대상 항목이 표시되면 상태를 설정하고, 그러면 애니메이션 클래스가 추가됩니다.

이렇게 하면 매 프레임마다 실행되는 무거운 스크롤 리스너 없이 스크롤 시 나타나는 효과를 만들 수 있습니다.

animation-delay는 각 키프레임 애니메이션이 시작되는 시점을 엇갈리게 합니다. 항목 목록에 점점 증가하는 지연 시간을 지정하면 안무처럼 순서대로 애니메이션이 실행됩니다.

style={{ animationDelay: i * 80 + 'ms' }}를 사용하면 리액트에서 항목별 지연 시간을 계산할 수 있습니다.

상호작용으로 발생하는 간단한 두 상태의 변화에는 전환을 사용하고, 여러 단계의 움직임이나 반복, 상태 전환과 독립적으로 실행되는 애니메이션이 필요할 때는 키프레임을 사용하십시오.

둘 다 순수한 CSS이므로 리액트는 클래스가 언제 연결될지만 결정하고, 프레임 처리는 브라우저가 담당합니다.

키프레임 동작에 대한 이해도를 확인해 보십시오.

@keyframes를 정의하고, animation 단축 속성으로 적용하며, 채우기 모드와 방향을 제어하고, 애니메이션을 일시 중지하거나 다시 실행하며, IntersectionObserver로 스크롤 시 요소를 나타내는 방법을 배웠습니다.

접근성을 고려한 모션을 위해 prefers-reduced-motion을 존중하는 방법도 살펴보았습니다.