Chapter3 - keyframes

keyframes 사용하기

 

keyframes는 styled-components안에 이미 들어있다!

웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용한다.

transition은 단순한 엘리먼트 상태변화에 쓰기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋다!

Keyframes은 animation에서 사용하는 속성 중 하나이다!

 

App.js

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

stlyed-components를 활용해 네모 박스를 만들어준 뒤 동그라미로 바꿔준다.

이후 keyframes를 활용해 위아래로 움직이며 네모와 동그라미로 계속 바뀌도록 만들어 보자! 

 

주의할점! const는 선언해 준 뒤부터 사용 가능한 특성 때문에 keyframes는 styled-components보다 먼저의 위치에 있어야 한다.