2022/04/07 styled component에서 CSS애니메이션 적용하기

https://medium.com/@matt.readout/adding-css-animations-with-styled-components-6c191c23b6ba

Adding CSS Animations with Styled Components

참고예제

import styled, { keyframes } from 'styled-components'
const Breathe = () => {
 return (
  <Container>
   <Circle />
  </Container>
 )
}
export default Breathe

//keyframe 변수명 선언
const breatheAnimation = keyframes`
 0% { height: 100px; width: 100px; }
 30% { height: 400px; width: 400px; opacity: 1 }
 40% { height: 405px; width: 405px; opacity: 0.3; }
 100% { height: 100px; width: 100px; opacity: 0.6; }
`

//적용할 부분에 animation-name으로 넣어준다
const Circle = styled.div`
 height: 100px;
 width: 100px;
 border-style: solid;
 border-width: 5px;
 border-radius: 50%;
 border-color: black;
 animation-name: ${breatheAnimation};
 animation-duration: 8s;
 animation-iteration-count: infinite;
`

이밖에 보통 CSS에서 적용할 때는 다음과 같이 쓴다

https://www.w3schools.com/css/css3_animations.asp

CSS Animations