title: Reactjs - set transition in inline CSS
body: <p>Codesandbox for reference:
  <a href="https://codesandbox.io/s/busy-leaf-onnqq" rel="nofollow noreferrer">https://codesandbox.io/s/busy-leaf-onnqq</a></p>
  
  <p><strong>I want to make the <em>blinky</em> lights in the animation scale up and down, so they look <em>more stretchy</em> and <em>less blinky</em></strong></p>
  
  <p>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:</p>
  
  <pre><code>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 = () =&gt; {
      var df4 = df3["Devotions"];
      console.log(df4);
      return df4.map(v =&gt; {
        return Object.keys(v).map(host =&gt; {
          return (
            &lt;div&gt;
              &lt;div
                className={host}
                style={{
                  fontFamily: "Djakarta",
                  color: "rgba(143, 0, 145,0.6)",
                  margin: "27px",
                  fontSize: "9px"
                }}
              &gt;
                {host}
                {Object.keys(v[host]).map((x, i) =&gt; (
                  &lt;div
                    key={i}
                    className={`day${i + 1}`}
                    style={{
                      borderRadius: "50%",
                      transform: `scale(${v[host][x]},${v[host][x]})`,
                      opacity: "9%"
                    }}
                  &gt;
                    {v[host][x]}
                  &lt;/div&gt;
                ))}
              &lt;/div&gt;
            &lt;/div&gt;
          );
        });
      });
    };
  
    render() {
      return &lt;div id="animap"&gt;{this.renderDiv()}&lt;/div&gt;;
    }
  }
  
  export default Maps;
  </code></pre>
  
  <p>In the css I have keyframes for the classes, such as these; each class only appearing for a moment in the whole animation:</p>
  
  <pre><code>.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%}
  }
  ...
  </code></pre>
  
  <p><strong>What i would like to do it set keyframes right in the jsx</strong> if possible, but if theres a better way, thats great. i tried adding simple transitions, but that's not working.</p>
  
  <pre><code>Object.keys(v[host]).map((x, i) =&gt; (
                  &lt;div
                    key={i}
                    className={`d${i + 1}`}
                    style={{
                      borderRadius: "50%",
                      transition: 'transform 0.5s',
                      transform: `scale(${v[host][x]},${v[host][x]}) `
  
                    }}
  </code></pre>
  
  <p>So yeah, how can i make these blinky dots scale?</p>
  
  <p><a href="https://codesandbox.io/s/busy-leaf-onnqq" rel="nofollow noreferrer">https://codesandbox.io/s/busy-leaf-onnqq</a></p>