스파르타코딩클럽 - 항해99/항해99 Chapter3 - react 주특기 기본
Chapter3 - keyframes
Ming
2021. 11. 25. 06:38
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보다 먼저의 위치에 있어야 한다.