Reactjs - set transition in inline CSS

Codesandbox for reference: https://codesandbox.io/s/busy-leaf-onnqq

I want to make the blinky lights in the animation scale up and down, so they look more stretchy and less blinky

Currently, I have a react class that renders divs with values object indices in a JSON array. I'm scaling divs using the index, and the transform translate property:

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;

In the css I have keyframes for the classes, such as these; each class only appearing for a moment in the whole animation:

.day1 {
  height: 19px;
  width:19px;
  animation: a1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 0%;
}
@keyframes a1 {
  0%{opacity:  0%}
  5%{opacity:  0%}
  10%{opacity: 9%}
  20%{opacity: 0%}
  30%{opacity: 0%}
  40%{opacity: 0%}
  50%{opacity: 0%}
  60%{opacity: 0%}
  70%{opacity: 0%}
  80%{opacity: 0%}
  90%{opacity: 0%}
  100%{opacity: 0%}
}
...

What i would like to do it set keyframes right in the jsx if possible, but if theres a better way, thats great. i tried adding simple transitions, but that's not working.

Object.keys(v[host]).map((x, i) => (
                <div
                  key={i}
                  className={`d${i + 1}`}
                  style={{
                    borderRadius: "50%",
                    transition: 'transform 0.5s',
                    transform: `scale(${v[host][x]},${v[host][x]}) `

                  }}

So yeah, how can i make these blinky dots scale?

https://codesandbox.io/s/busy-leaf-onnqq