4주차 - keyframes

- keyframes란?

: styled-components 안에 이미 들어 있습니다.

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

 

-> transition은 단순한 요소(element) 상태변화에 쓰기 좋습니다.

-> animation은 다이나믹한 효과를 주는 데 쓰기 좋습니다.

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

 

- css에서는 이런 식으로 keyframes를 씁니다.

.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;
 }

 

1) 프로젝트를 생성합니다.

yarn create react-app 'animation_ex'

2) 네모 박스를 하나 만들어 줍니다.

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;

3) keyframes로 움직이는 동그라미 만들기

 

- box에 border-radius를 사용해서 동그랗게 만들어 줍니다.

const Box = styled.div`
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: green;
  animation: ${boxFade} 2s 1s infinite linear alternate;
`;

- position을 줘서 어디에 위치 할 지 설정 해줍니다.

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

 

- keyframes를 사용해서 위, 아래로 움직여 봅니다.

// 이런식으로 동시에 여러가지 애니메이션을 넣어줄 수 있어요!
const boxFade = keyframes`
  0% {
    opacity: 1;
    top: 20px;

  }
  50% {
    opacity: 0;
    top: 400px;
  }
  100% {
    opacity: 1;
    top: 20px;
  }
  
  // or from, to를 사용하기도 합니다.
`;

// const로 선언한 변수는 선언부 보다 위에 사용하면
// ReferenceError: Cannot access 'boxAnimation' before initialization
// 라는 에러를 발생 시킨다.