[REACT] keyframes 애니메이션 사용하기 /위아래로 애니메이션

keyframes 사용하기

 

yarn add styled-components

 

 

 

 

App.js

import React from 'react';
import './App.css';
import styled, {keyframes} from "styled-components";
 
function App() {
  
  return (
    <div className="App">
     <Box></Box>
    </div>
  );
}
const boxFade = keyframes`
  0% {
    opacity: 1;
    top: 20px;
 
  }
  50% {
    opacity: 0;
    top: 400px;
  }
  100% {
    opacity: 1;
    top: 20px;
  }
`;
const Box = styled.div`
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: green;
  position: absolute;
  top: 20px;
  left: 20px;
  animation: ${boxFade} 2s 1s infinite linear alternate;
`;
 
 
 
export default App;

주의: 키프레임 변수를 설정하기 전에 Box에서 부르면 안됨!

키프레임이 위에 있어야한다는 뜻