Keyframes with Inline Styles ReactJS Keyframes with Inline Styles ReactJS reactjs reactjs

Keyframes with Inline Styles ReactJS


If you like to keep all your styling tightly coupled to your components, give Styled Components a go. They have a helper for keyframes

e.g.

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

Then use like so:

<Bar>I pulse</Bar>