title: Assign a random number to a keyframe animation value
body: <p>I'm trying to create an animated background. In short, there are 6 icons which should all animate to move around the page within a small boundary.</p>
  <p>Current JS Fiddle works to an extent but need to make amends as below:</p>
  <h2><a href="https://jsfiddle.net/mLegg2vt/7/" rel="nofollow noreferrer">https://jsfiddle.net/mLegg2vt/7/</a></h2>
  <p>I wish to randomly generate the movement of these icons so that they bob/hover around within the following bounds:</p>
  <pre><code>x axis = 1px to 5px
  y axis = 13px to 20px
  </code></pre>
  <p>I have managed to get a solution using hardcoded values but now think I'm <strong>going about it the wrong way</strong> as it would require <strong>creating multiple keyframe animations</strong> for each icon with different values. I'm not necessarily against this, but I'm not sure how to achieve it.</p>
  <p>I have generated random numbers for each icon within the bounds above using the following:</p>
  <pre><code>var x = randomInt(5, 1); // use this value for x in translate3d
  var y = randomInt(20, 13); // use this value for y in translate3d
  
  function randomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
  }
  </code></pre>
  <p>However I now need to create a keyframe animation for this particular icon using the values created above. At present my hardcoded keyframe animation is used for all icons and looks like this:</p>
  <pre><code>@keyframes gentleHover {
      0% {
          transform: translate3d(0px, 0px, 0px);
      }
      50% {
          transform: translate3d(5px, 15px, 0px);
      }
      100% {
          transform: translate3d(0px, 0px, 0px);
      }
  }
  </code></pre>
  <p>In the above, I wish to populate the 50% keyframe with my values e.g:</p>
  <pre><code>50% {
      transform: translate3d(xpx, ypx, 0px);
  }
  </code></pre>
  <p>Now my question is <strong>how can I do this for each icon, within jQuery?</strong> How can I create a CSS keyframe for each of these 6 icons, with the values? I understand how to add CSS to a particular element with <code>.css()</code> but now how to create an entirely new piece of CSS within the stylesheet. I understand I'll then need to add that generated keyframe animation onto this element, but that's easy:</p>
  <pre><code>$(this).css('animation', '[theCreatedKeyframeHere] 5s linear infinite');
  </code></pre>
  <p><em>The only way I can think to do this is to put the keyframes wrapped inside <code>&lt;style&gt;</code> tags into the stylesheet. But is that recommended?</em></p>
  <p>It's also important to note all the jQuery above is included in a <code>site.js</code> file which is called in via the header. It is not in <code>&lt;script&gt;</code> tags on the page.</p>