WEB/REACT
[REACT] keyframes 애니메이션 사용하기 /위아래로 애니메이션
자바칩 프라푸치노
2021. 6. 30. 01:37
keyframes 사용하기
yarn add styled-components
App.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
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;
|
cs |
주의: 키프레임 변수를 설정하기 전에 Box에서 부르면 안됨!
키프레임이 위에 있어야한다는 뜻
728x90