[React] styled component (2) _ animation

컴포넌트에 에니메이션 효과 주기

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

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

const Rotation = keyframes`
0% {
  transform: rotate(odeg);
  border-radius: 0px
}
50%{
  border-radius: 150px;
}
100% {
  transform: rotate(360deg)
}`;

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 300px;
  height: 300px;
  animation: ${Rotation} 1s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  h1 {
    color: white;
    &:hover {
      color: black;
    }
  }
`;

function App() {
  return (
    <div>
      <Parent>
        <Box bgColor="tomato">
          <h1>Loading...</h1>
        </Box>
      </Parent>
    </div>
  );
}

export default App;

빙글빙글 돈다.. 너무 재밌다.... 로딩 마크에 진심이 될것 같다.