Hello friends, I am sharing a generated keyframe with you . In this code I have set an animation on a DOM element . I have used insertRule for dynamically adding CSS and <style> tags for making it easier to remove the animation once they're over.

    var target =  document.querySelector('.target');
    var form = document.querySelector('form');

    // To help generating the keyframes we'll use a 
    var template = document.querySelector('[type^=application]').textContent;

    var keyframeContainer;

    var currentAnimationId = 1;
    form.addEventListener('submit', function(event) {

      event.preventDefault();

      target.classList.remove('target-bouncing');

      // Remove previous animation
      if (keyframeContainer) {
        document.head.removeChild(keyframeContainer);
      }

      // Generate the keyframes
      var animationId = 'bouncing-'+ (currentAnimationId ++);
      var generatedKeyframes = template.replace(/\{\{bounceHeight\}\}/g, this.bounceHeight.value + 'px');
      generatedKeyframes = generatedKeyframes.replace(/\{\{animationId\}\}/g,
    animationId);

      // And inssert the new keyframes...
      keyframeContainer = document.createElement('style');
      keyframeContainer.textContent = generatedKeyframes;
      document.head.appendChild(keyframeContainer);

      // ... before applying them to the target
      target.style.webkitAnimationName = animationId;
      target.style.animationName = animationId;
      target.style.webkitAnimationDuration = this.duration.value + 's';        target.style.animationDuration =this.duration.value + 's';
      target.style.animationDirection = 'alternate';
      target.style.webkitAnimationDirection = 'alternate';

      target.style.animationIterationCount = 'infinite';
      target.style.webkitAnimationIterationCount = 'infinite';
    });

form.addEventListener('reset', function(event) {
  event.preventDefault();

  target.classList.remove('target-bouncing');
  target.style.animationName = '';
  target.style.webkitAnimationName = '';
});