[CSS] keyframes animation 실습

이렇게 동작한다

Keyframes 와 animation을 이용해 위와 같이 움직이는 효과를 만드는 실습을 했다.

html과 css를 사용했는데 문제는 css파일이 아닌 React에서 쓰는 @emotion/styled를 이용해

JavaScript 파일에서 태그 대신 함수를 만들어 사용했기 때문에 Keyframes를 어떻게 사용해야하는지 몰라 한참을 해매다가 겨우 성공!!ㅜㅜ

 

일단 기본적으로 css에서는

@keyframes titleText {
    0% {
        transform: translateY(70px);
        opacity: 0;
    }
    92% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

이런식으로 css파일에 넣지만 내가 작성하는 파일은 css가 아닌 js 파일이기 때문에 이렇게 했다가는 에러가 난다..

그래서 알아낸 방법이  변수를 만들어 거기에 Keyframes를 넣어서 사용하는것인데 중요한건 Keyframes를 먼저 선언한 후 그 다음에 animation을 써야 한다는 것이다.

 

아래는 완성된 코드!

---

index.js

import { Text } from "@/styles/css_test_01/test01";

export default function CssTest01() {
  return (
    <div>
      <div>테스트</div>
      <Text>Welcome to my shop</Text>
    </div>
  );
}

test01.js

import { keyframes } from "@emotion/react";
import styled from "@emotion/styled";

//키프레임 먼저 선언
export const titleText = keyframes`
0% {
      transform: translateY(70px);
      opacity: 0;
    }
    92% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
`;

export const Text = styled.div`
  font-size: 20px;
  font-weight: bold;
  text-decoration: underline;
  color: orange;

  animation: ${titleText} 2s ease-in-out infinite;
`;