CSS 애니메이션 : Keyframe 응용

Fill Modes

왜 사라졌다 다시 나타나지?

from 및 to 블록의 선언은 애니메이션이 실행되는 동안에만 적용됩니다.

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  .box {
    animation: fade-out 1000ms;
  }

 

Hello World

즉, 기본값인 불투명도 1로 돌아가는 건데요, 그러면 애니메이션 종료 시의 속성을 선언해줘야 하나?

  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  .box {
    animation: fade-out 1000ms;
    /*
      Change the "default" value for opacity,
      so that it reverts to 0 when the
      animation completes.
    */
    opacity: 0;
  }

참고 : https://www.w3.org/TR/css-cascade-3/#cascade-sort
keyframes의 선택자 우선순위는 상당히 높음.

---

Filling forwards

animation-fill-mode를 사용하면 애니메이션의 최종 값을 앞으로 계속 유지할 수 있습니다.

(to 블록의 속성을 유지)

  .box {
    animation: fade-out 1000ms;
    animation-fill-mode: forwards;
  }

---

Filling backward

아래와 같이 스타일을 적용하면 어떻게 될까요?

  @keyframes slide-in {
    from {
      transform: translateX(-100%);
      opacity: 0.25;
    }
    to {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  .box {
    animation: slide-in 1000ms;
    animation-delay: 500ms;
  }

delay 때문에 처음에 보이다가, 점점 나타나다가 계속 보이게됩니다.

animation-fill-mode에 backward를 적용하면 from 블록의 애니메이션 속성을 선제 적용할 수 있습니다.

  .box {
    animation: slide-in 1000ms;
    animation-delay: 500ms;
    animation-fill-mode: backwards;
  }

---

both

제일 많이 쓰게 될 것입니다.

---

단축 속성

.box {
  animation: slide-in 1000ms ease-out both;
  animation-delay: 500ms;
}

---

Dynamic Updates

아래와 같이 리액트 컴포넌트에 스타일을 적용하면, disabled시 css가 증발해서 원래 위치로 돌아가게 됨.

      <Box
        style={{
          animation: animated
            ? 'jump 1000ms infinite'
            : undefined,
        }}
      />

중간에 멈추게 할 수도 있음. (animation-play-state)

      <Box
        style={{
          animationPlayState: animated
            ? 'running'
            : 'paused',
        }}
      />

---

Animations vs. transitions

@keyframes는 언제 사용해야 하고, transition은 언제 사용해야 하는지 궁금할 수 있습니다.

@keyframes

@keyframes만 할 수 있는 몇 가지 작업이 있습니다.

• 반복되는 애니메이션
• 다단계 애니메이션 
• 일시 중지 가능한 애니메이션

페이지가 로드되거나 컴포넌트가 마운트될 때 애니메이션을 즉시 실행해야 하는 경우

@transition

반면 일부 애플리케이션 상태 또는 사용자 작업의 결과로 CSS가 변경될 때

값 사이의 가혹한 전환을 매끄럽게 만들고 싶을 때 사용합니다.

---

With styled-components

styled-components를 사용하여 CSS를 작성할 때 모든 스타일은 특정 컴포넌트와 결합됩니다.

하지만 @keyframes의 at-rule은 전역적으로 선언되어야 합니다.

스타일드 컴포넌트와 함께 @keyframe을 어떻게 사용하나요?

 

import styled, { keyframes } from 'styled-components';
function App() {
  return <FloatingCircle />;
}
const float = keyframes`
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(-10px);
  }
`;
const FloatingCircle = styled.div`
  animation: ${float} 1000ms infinite alternate ease-in-out;
`;

---

 

keyframes 함수는 styled 헬퍼 함수와 마찬가지로 태그드 템플릿 리터럴을 사용하여 호출됩니다.

보간 방식으로 전역 이름 충돌 걱정을 하지 않아도 됩니다.

각 애니메이션에는 컴포넌트 클래스와 마찬가지로 고유하고 임의의 이름이 지정됩니다!

이 float 애니메이션의 이름은 실제로 exvRVV 또는 BozTiK일 수 있습니다.

자세히 알아보기 : styled-components documentation

 

실전 예제

튀어나오는 help 버튼과 흔드는 손