[Styled-Component] animation

🔶 styled-component에서 animation주는법

css와 동일한 방식임

• styled-components 에서 트랜지션 사용 할 때에는 keyframes 라는 유틸을 사용합니다.

import styled, { keyframes } from "styled-components"; /* 1.keyframes를 import하고 */

const rotate = keyframes` /* 2. css코드를 씀. */
0%{
    transform: rotate(0deg);
    border-radius: 0px;
}
50%{ 
    border-radius: 100px;
}
100%{
    transform: rotate(350deg);
    border-radius: 0px;
}
`;

const Box = styled.div`
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: bisque;
  animation: ${rotate} 1s linear infinite; /* 2. css코드를 씀. */
  
   span {
    font-size: 20px;
    &:hover {
      font-size: 40px;
    }
  }
`;

const App = () => {
  return (
    <Box>
      <span>👩🏻‍💻</span>
    </Box>
  );
};