[react]アニメーションの使い方<修正する>

今日は、アニメーションの効果を与える方法について解説します.
propsを使用して、レスポンススタイルコンポーネントをアニメートできます.

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

styled componentでアニメーション効果を使用するには、上記のコードを先に入れてください.

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

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation:${animation} 1s linear infinite; //1초동안 선형 무한 속성값주기
`;

キーフレームを作成し、back-tickでアニメーション効果を作成します.
次に、使用するcomponentからcomponentをロードします.
アニメーションあにめーしょん:キーフレーム名|合計進行状況|遅延|繰返し回数