keyframes - transition , animation

1. keyframes 사용하기

이미 styled-components 안에 들어있으며, 웹에서 애니메이션을 구현할 때 쓰인다.(transition , animation)

 

- transition은 단순한 엘리먼트 상태변화에 쓰이고,

- animation은 다이나믹한 효과를 주는데 쓰다.

   → Keyframes은 animation에서 사용하는 속성 중 하나

 

아래 예제를 통해서 어떻게 동작하는지 익혀보자.

 

1. 네모박스를 우선 만들어보자. 

import React from 'react'; import './App.css'; // styled와 keyframes를 불러온다. import styled, {keyframes} from "styled-components"; function App() {           return (              <div className="App">                     <Box></Box>               </div>        );      } // 박스를 먼저 하나 만들어준다. const Box = styled.div`     width: 100px;     height: 100px;     background: green; `; export default App;

네모박스의 CSS를 수정하여 위치도 조정해보고, 원 모양으로 변경도 해보자.

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; `;

아래와같이 동시에 여러 애니메이션 효과를 넣어 줄 수 있다.

const boxFade = keyframes`      0% {        opacity: 1;        top: 20px;       transform: scale(1)       }       50% {         opacity: 0;         top: 400px;         transform: scale(0)        }        100% {           opacity: 1;           top: 20px;           transform: scale(1)         } `;

중간중간에 30%, 70%도 추가해보고, 방향, 움직임 등등을 자유롭게 조절하여 애니메이션 효과를 줄 수 있다.

 

 

애니메이션효과는 여러가지 ㄷ