[CSS] keyframes animation: usage in React : 리액트에서 키프레임/애니메이션을 이용한 동적인 이미지/컨텐츠 구현하기

사이트의 Footer에 위치한 특정 이미지에 키프렘을 이용해서 사이트에 적용한 예제입니다.

사이트가 정적이고 지루한듯해서 과하지 않은 애니메이션을 넣으려고 찾았으나,
보통 HTML에 CSS로만 적용을 하는 예제가 많더라구요.

저는 React로 페이지를 작성하다보니, animation에 대한 이해가 적은 지금으로써는
React로 코드를 변형해 오는게 쉽지 않았습니다. (지금 작성한 코드도 정리가 조금 들된 느낌이네요.)

우선, 제가 적용한 애니메이션은 3가지로
상하로 튀는 에니메이션, 좌우로 부드럽게 움직이는 애니메이션, 정면확대되었다가 되돌아가는 에니메이션, 3가지 모두 기본 동작입니다.

제 코드를 보시면, 컴포넌트안에 인라인으로 css 코드를 구현해서 애니메이션의 이름과 지속시간, 반복횟수를 넣어줬는데. 별로 좋은 예가 아닙니다. 이부분도 keyframes 처럼 코드밖으로 빼야하는데, 아직은 제가 빼네는 방법을 몰라서 이렇게 구현했어요. 혹시 아는분 계시면 댓글 부탁드립니다.

상하로 튀는 애니메이션 코드:

import { css, keyframes } from '@emotion/react'

export default function Footer() {
  return (
    <footer sx={styles.footer} >
      <Container>
      <Image  css={css`
                  animation: ${bounce} 2s ease infinite;
              `} src={FooterLogo} alt="Logo" />
   );
}

const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }

  70% {
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }

좌우로 움직이는 애니메이션 코드:

import { css, keyframes } from '@emotion/react'

export default function Footer() {
  return (
    <footer sx={styles.footer} >
      <Container>
      <Image  css={css`
                  animation: ${bounce} 3s ease infinite;
              `} src={FooterLogo} alt="Logo" />
   );
}

const bounce = keyframes`
  from, 0%, 100%, to {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(-150px, 0px, 110px);
  }
  80% {
    transform: translate3d(150px,0px,110px);
  }
`

위아래로 튀는 애니메이션 코드:

import { css, keyframes } from '@emotion/react'

export default function Footer() {
  return (
    <footer sx={styles.footer} >
      <Container>
      <Image  css={css`
                  animation: ${testBounce} 3s ease infinite;
              `} src={FooterLogo} alt="Logo" />
   );
}

const testBounce = keyframes`
    0%{
        transform: translateY(0) scale(1) rotate(0deg);
    }
    60% {
        transform: translateY(-25px) scale(2.5) rotate(360deg);
        opacity: 1;
    }

    100%{
        transform: translateY(-35px) scale(0);
        opacity: 0;
    }
`