Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create Generated Keyframes in Javascript

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 343
    Comment on it

    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 = '';
    });
    
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: