스파르타 코딩클럽 - 리액트 4주차(1)

1. Keyframes

1-1. keyframes 사용하기.

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

transition은 단순한 엘리먼트 상태변화에 쓰기 좋고,
animation은 다이나믹한 효과를 주는데 쓰기 좋다.
keyframes은 animation에서 사용하는 속성 중 하나이다.

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

1-2. 애니메이션 주기.

• App.js

import React from "react";
import styled, {keyframes} from "styled-components";

function App() {
  return (
    <div className="App">
      <Box></Box>
    </div>
  );
}

const move = keyframes`
  0%{
    20px;
    opacity: 1;
    left: 20px;
    background-color: green;
  }

  30%{
    top: 50px;
    background-color: orange;
  }

  50%{
    top: 200px;
    opacity: 0;
    left: 200px;
  }

  80%{
    top: 150px;
  }


  100%{
    top: 20px;
    opacity: 1;
    left: 20px;
    background-color: green;
  }
`;

const Box = styled.div` 
  width: 200px;
  height: 200px;
  background-color: green;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 1;
  animation: ${move} 2s 1s infinite;
`;

export default App;