set keyframe animation, inline in React

问题

Codesandbox as always: https://codesandbox.io/s/busy-leaf-onnqq

I have a react class that renders sets of divs, which contain inner divs with values set by values associated with indices in a JSON array. Currently, I am scaling divs using translate:

import React, { Component } from "react";
import "./Maps.css";
import df3 from "./data/df3.json";

class Maps extends Component {
  constructor() {
    super();
    const data = df3;
    this.state = data;
  }
  renderDiv = () => {
    var df4 = df3["Devotions"];
    console.log(df4);
    return df4.map(v => {
      return Object.keys(v).map(host => {
        return (
          <div>
            <div
              className={host}
              style={{
                fontFamily: "Djakarta",
                color: "rgba(143, 0, 145,0.6)",
                margin: "27px",
                fontSize: "9px"
              }}
            >
              {host}
              {Object.keys(v[host]).map((x, i) => (
                <div
                  key={i}
                  className={`day${i + 1}`}
                  style={{
                    borderRadius: "50%",
                    transform: `scale(${v[host][x]},${v[host][x]})`,
                    opacity: "9%"
                  }}
                >
                  {v[host][x]}
                </div>
              ))}
            </div>
          </div>
        );
      });
    });
  };

  render() {
    return <div id="animap">{this.renderDiv()}</div>;
  }
}

export default Maps;

and i separately have keyframes for the classes, such as these:

.day1 {
  height: 19px;
  width:19px;
  animation: a1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 0%;
}
@keyframes a1 {
  50% {
    opacity: 100%;
  }
}
...

What i would like to do it set keyframes right in the jsx if possible. Being able to animate the appearance of inner divs with css properties set by the json is the goal. something like

{Object.keys(v[host]).map((x, i) => (
                <div
                  key={i}
                  className={`day${i + 1}`}
                  style={{
                    borderRadius: "50%";
                    height: 19px;
                    width: 19px;
                    opacity: 9%;
                    @keyframe{50%{opacity: 19%}} 
                    @keyframe{50%{transform: scale(${v[host][x]},${v[host][x]})}} 
                  }}
                >
                  {v[host][x]}
                </div>
              ))}

Thanks for your help in creating these animations. https://codesandbox.io/s/busy-leaf-onnqq

来源：https://stackoverflow.com/questions/61945842/set-keyframe-animation-inline-in-react