[리액트] keyframes

01. keyframes

• 1) keyframes 사용하기
  

👉 keyframes는 styled-components안에 이미 들어있습니다!
웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용합니다.


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

**Keyframes은 animation에서 사용하는 속성 중 하나랍니다!**


- css에서는 이런 식으로 keyframes를 씁니다.
    
    ```css
    .box {
     width: 100px;
     height: 100px;
     background: #444;
    }
    .box.active {
     animation: boxFade 2s 1s infinite linear alternate;
    }
    @keyframes boxFade {
     0% {
      opacity: 1;
     }
     50% {
      opacity: 0;
     }
     100% {
      opacity: 1;
     }
    ```
    
- 프로젝트를 하나 새로 만들어서 시작해볼까요!
    

    👉 새 프로젝트에 styled-components를 설치해주세요!
    

    
- 네모 박스를 하나 만들어주세요.

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

• 2) keyframes으로 움직이는 동그라미 만들기
  • Box를 동그랗게 만들고,
    

    ```jsx
    ...
    const Box = styled.div`
      width: 100px;
      height: 100px;
      border-radius: 50px;
      background: green;
      animation: ${boxFade} 2s 1s infinite linear alternate;
    `;
    ...
    ```
    
- position을 준 다음,
    
    ```jsx
    ...
    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;
    `;
    ...
    ```
    
- 위 아래로 움직이게 해보자!
    
    ```jsx
    ...
    // 이런식으로 동시에 여러가지 애니메이션을 넣어줄 수 있어요!
    const boxFade = keyframes`
      0% {
        opacity: 1;
        top: 20px;
    
      }
      50% {
        opacity: 0;
        top: 400px;
      }
      100% {
        opacity: 1;
        top: 20px;
      }
    `;
    ...
    ```
    

😉 이거 재미있죠? styled-components와 keyframes로 할 수 있는 건 훨씬 많아요!
여러 가지 애니메이션 효과를 찾아서 넣어보세요. 즐거울거예요.