keyframes 웹에서 애니메이션 깔기

keyframes는 이미 styled-components에 포함되어있다.

애니메이션 구현할땐 transition(단순)과 animation(다이나믹)이라는 스타일 속성을 많이 사용

 

yarn add styled-components

애니메이션 속성이라고 구글링하면 많이나옴

애니메이션이 적용된 Box

import './App.css';
import styled, {keyframes} from 'styled-components';

function App() {
  return (
    <div className="App">
      <Box></Box>
    </div>
  );
}
const move = keyframes`
  0% {
    top: 20px;
    opacity: 1;
  }

  30% {
    top: 50px;
    left: 20px
  }

  50% {
    top: 200px;
    opacity: 0;
    left: 50px;
  }

  80% {
    top: 150px;
    left: 20px;
  }

  100% {
    top: 20px;
    opacity: 1;
    background-color: yellow;
  }
`;

const Box = styled.div`
  width: 300px;
  height: 300px;
  background-color: green;
  border-radius: 150px;
  position: absolute;
  top: 20px;
  left: 20px;
  animation: ${move} 2s 1s infinite;
  // 무한히 반복
`;


export default App;