[REACTJS] 인라인 스타일 ReactJS와 키 프레임

인라인 스타일 ReactJS와 키 프레임

해결법

1. ---

   1.당신이 단단히 구성 요소에 연결된 모든 스타일을 유지하기 위해 좋아하는 경우에, 스타일 된 구성 요소 갈 줄. 그들은 키 프레임을위한 도우미가

   당신이 단단히 구성 요소에 연결된 모든 스타일을 유지하기 위해 좋아하는 경우에, 스타일 된 구성 요소 갈 줄. 그들은 키 프레임을위한 도우미가

   EG

   import styled, { keyframes } from 'styled-components'
   
   const pulse = keyframes`
     from {
       background-color: #001F3F;
     }
   
     to {
       background-color: #FF4136;
     }
   `
   
   const Bar = styled.div`
     color: #000;
     padding: 1em 0;
     font-size: 20px,
     text-align: center;
     cursor: pointer;
     position: fixed;
     bottom: '0',
     width: 100%;
     z-index: 10;
     animation: ${pulse} 1.2s ease-in-out;
     animation-iteration-count: infinite;
   `
   

   다음과 같이 사용합니다 :

   <Bar>I pulse</Bar>
   

from https://stackoverflow.com/questions/37448937/keyframes-with-inline-styles-reactjs by cc-by-sa and MIT license