[STYLED COMPONENTS] animation

학습일 : 2023. 03. 28

---

styled-component 안에서 animation을 주기 위해서는
helper function을 import 해주어야 한다

import styled, {keyframes} from "styled-components";

이렇게 import를 해주고

 

 

회전하는 animation을 만들어 보고자 한다.

이렇게 먼저 animation을 keyframes를 사용하여 정의해주고

(rotationAnimation 이 이름은 바꿔줘도 상관없다.)

// animation
const rotationAnimation = keyframes`
from {
  transform: rotate(0deg);
}
to {
  transform: rotate(360deg);
}
`;

 

 

사용은 이런식으로 하면 된다.

// Box
const Box = styled.div`
  background-color: salmon;
  height: 200px;
  width: 200px;
  animation: ${rotationAnimation} 1s linear infinite;
`;

 

 

전체 코드

 

import styled, { keyframes } from "styled-components";

const Wrapper = styled.div`
  display: flex;
`;

// animation
const rotationAnimation = keyframes`
from {
  transform: rotate(0deg);
}
to {
  transform: rotate(360deg);
}
`;

// Box
const Box = styled.div`
  background-color: salmon;
  height: 200px;
  width: 200px;
  animation: ${rotationAnimation} 1s linear infinite;
`;

function App() {
  return (
    <Wrapper>
      <Box />
    </Wrapper>
  );
}

export default App;

 

 

실행결과

 

 

 

0%, 50%, 100% 방식으로 지정해주면

import styled, { keyframes } from "styled-components";

const Wrapper = styled.div`
  display: flex;
`;

// animation
const rotationAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius: 0px;
    background-color: red;
  }
  50% {
    transform:rotate(360deg);
    border-radius: 100px;
    background-color: yellow;

  }
  100%{
    transform:rotate(0deg);
    border-radius: 0px;
    background-color: blueviolet;

  }
  `;

// Box
const Box = styled.div`
  background-color: salmon;
  height: 200px;
  width: 200px;
  animation: ${rotationAnimation} 10s linear infinite;
`;

function App() {
  return (
    <Wrapper>
      <Box />
    </Wrapper>
  );
}

export default App;

 

 

 

 

애니메이션 너무 귀엽고 재밌다