title: React - Injecting inline style with animation
body: <p>I have a component that needs to have different animations for each one of its children.</p>
  <p>I am using React Hooks and Material UI to style my components.</p>
  <p>My component(s) looks as follows:</p>
  <pre><code>const useStyles = makeStyles({ // from material ui
    root: {
      position: 'relative',
    },
    child: {
      position: 'absolute',
    },
  })
  
  const Children = (props) =&gt; {
    const { count } = props;
    const classes = useStyles();
    const elements = [];
  
    // Generating random values for each child.
    for (let i = 0; i &lt; count; i += 1){
      const randomX = Math.random() * 100;
      const randomY = Math.random() * 100;
      ... other random variables
      const delay = Math.random(); // I want to use this in my animation
      const duration = Math.random() * (3 - 0.5) + 0.5; // I want to use this in my animation
      elements.push({ ... all random variables mapped });
    }
  
    return (
      &lt;&gt;
        {elements.map(item =&gt; {
          &lt;div
            key={item.x}
            style={{
              top: `${item.x}`,
              left: `${item.y}`,
              color: `${item.color}`,
              ... and so forth
            }}
            className={classes.child}
          /&gt;
        }
      &lt;/&gt;
    );
  };
  
  const Parent = () =&gt; {
    const classes = useStyles();
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;Children count={5} /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>My issue is that I want different animations to trigger for the children elements. I have tried adding a keyframe animation section for the makeStyles styling, and if I just define it up there I can easily add the styling and keyframe animation, and it works! However I have issues with adding different parameters for each child element if I do it there, as far as I know.</p>
  <pre><code>const useStyles = makeStyles({
    root: { ... }, 
    child: {
      ...
      animation: '$fade 2s 1s infinite', // This works but I can't add different values for each child 
                                       // I want to change duration and delay for each child
    },
    '@keyframes fade': {
      '0%': { opacity: '0' }, 
      '100%': { opacity: '1' },
    },
  })
  </code></pre>
  <p>I have also tried adding my keyframe animation to the inline styling of the child, but that seems to not work at all.</p>
  <pre><code>&lt;div
    key={item.x}
    style={{
      top: `${item.x}`,
      left: `${item.y}`,
      color: `${item.color}`,
      ... and so forth
      animation: `fade ${item.duration} ${item.delay} infinite`, // this does not work - not even with static values
      }}
    className={classes.child}
  /&gt;
  </code></pre>
  <p>I'm posting here hoping that someone knows how to overcome my issue. Let me know your thoughts. I'm pretty sure it is possible with <code>StyledComponents</code>, but I don't feel like installing another styling library just to overcome this very specific issue.</p>
  <p>I'm pretty sure that I at some point worked with CSS custom variables <code>var(--duration)</code> &amp; <code>var(--delay)</code>, and it could do some pretty nice things (might even fix this issue), but I have been unable to find anything usable on the topic as of today. The issue is mostly how I inject the custom variables into my styling. If you know how I need to set this up, let me know.</p>
  <p>Thanks in advance.</p>