개발공부/리액트 기초
keyframes 웹에서 애니메이션 깔기
jennayeo
2021. 4. 13. 00:04
keyframes는 이미 styled-components에 포함되어있다.
애니메이션 구현할땐 transition(단순)과 animation(다이나믹)이라는 스타일 속성을 많이 사용
yarn add styled-components
애니메이션 속성이라고 구글링하면 많이나옴

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;