Html 具有内联样式的关键帧

我试图在ReactJS中设置脉动动画的关键帧。我试着在内联样式中设置关键帧，但这不起作用

---

如果您希望将所有样式与组件紧密耦合，请尝试使用样式化组件。他们有一个

e、 g

然后像这样使用：

<Bar>I pulse</Bar>

I脉冲

它可能重复，因为React无法知道

脉冲

动画。

.element {
  width: 100%;
  height: 100%;
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

html,
body {
  height: 100%;
}

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>