1. 목표

0-360도로 돌아가는 애니메이션을 제작해보자

1.1 애니메이션

• keyframe: 애니메이션 만들기 도구 -> %로 나눠서 몇퍼센트 상황일 때 어떤 변화를 야기하는지

const rotateAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius: 0;
  }
  50% {
    border-radius: 100px;
  }
  100% {
    transform:rotate(360deg);
    border-radius: 0;
  }
`;

• hover: 마우스 올려두면 애니메이션
• active: 마우스 클릭하면 애니메이션
• 10s linear infinite : 10초 동안 재생해주세요

1.2 코드

index.js

import React from 'react';
import ReactDOM from "react-dom"
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

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

const Wrapper = styled.div`
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
`;

// 0도 -> 360도 회전하는 애니메이션
const rotateAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius: 0;
  }
  50% {
    border-radius: 100px;
  }
  100% {
    transform:rotate(360deg);
    border-radius: 0;
  }
`;

const Emoji = styled.span`
  font-size: 36px;
`;

// 1초동안 애니메이션이 발생
// active: 클릭 시 애니메이션
const Box = styled.div`
  height:200px;
  width: 200px;
  background-color: tomato;
  animation:${rotateAnimation} 10s linear infinite;
  ${Emoji}{
	&:hover {
      font-size: 98px;
    }
	&:active {
	  opacity:0;
    }
  }
`;

// input required: attrs 안에 넣으면 됨
const Input = styled.input.attrs({ required: true, minLength: 10})`
  background-color: tomato;
  border:0;
`;

function App() {
  return (
    <Wrapper as="header">
      <Box></Box>
    </Wrapper>
  )
}

export default App;