How to dynamically create '@-Keyframe' CSS animations? Last Updated : 31 Aug, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report In order to dynamically allocate keyframe animations to our HTML web-page, we are going to use the CSS stylesheets insertRule() method. We are going to take keyframes animation from a text area and then we will apply those rules to our web-page. insertRule() method: This method is use to insert some new CSS rule into the current CSS style sheet(bound with some restriction). Syntax: stylesheet.insertRule(rule [, index]) Parameter: The method accepts two parameters as mentioned above and described below: Rule: A DOMstring which is essentially the CSS rule to be inserted. index(optional): The index at which the rule is inserted in CSSStyleSheet.cssRules Example: HTML: First, let's make the layout structure of our page using HTML and CSS. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2 style="color: green;">GeeksforGeeks</h2> <div id="element"></div> <form id="input"> <textarea id="text" rows="10" cols="40"></textarea><br> <button type="submit">ADD ANIMATION</button> </form> <style> #element{ width: 200px; height: 200px; background-color: green; margin-bottom: 5px; } </style> </body> Output: The structure will look like. JavaScript: Now, We are going to input a keyframe animation in the text area above and add it to the element that we have created. javascript // Javascript code to add keyframes let styleSheet = null; dynamicAnimation = (name,styles) => { // Creating a style element // To add the keyframes if (!styleSheet){ styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; document.head.appendChild(styleSheet); } // Adding The Keyframes styleSheet.sheet.insertRule(`@keyframes ${name} {${styles}}`, styleSheet.length ); } const form = document.getElementById("input"); const text = document.getElementById("text"); form.addEventListener('submit', (e)=>{ e.preventDefault() // Adding an animation // NewAnimation, with the // Keyframes to the Stylesheet dynamicAnimation('newAnimation', text.value); // Timing and duration can be altered // As per user requirements document.getElementById("element").style.animation = 'newAnimation 3s infinite'; }); Implementation Code: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2 style="color: green;">GeeksforGeeks</h2> <div id="element"></div> <form id="input"> <textarea id="text" rows="10" cols="40"></textarea><br> <button type="submit">ADD ANIMATION</button> </form> <style> #element{ width: 200px; height: 200px; background-color: green; margin-bottom: 5px; } </style> <script> let styleSheet = null; dynamicAnimation = (name,styles) => { if (!styleSheet){ styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; document.head.appendChild(styleSheet); } styleSheet.sheet.insertRule(`@keyframes ${name} {${styles}}`, styleSheet.length ); } const form = document.getElementById("input"); const text = document.getElementById("text"); form.addEventListener('submit', (e)=>{ e.preventDefault(); console.log("submitted"); console.log(text.value); dynamicAnimation('newAnimation', text.value); document.getElementById("element").style.animation = 'newAnimation 3s infinite'; }); </script> </body> </html> CSS:Now, We are going to add the following Keyframe Rule Set to the text box element. CSS 25%{ transform : translateX(25%); border-radius : 25%; } 50%{ transform : translateX(50%); border-radius : 50%; } 75%{ transform : translateX(25%); border-radius : 25%; } 100%{ transform : translateX(0%); border-radius : 0%; } Output: Before Submitting Keyframes: After Submitting Keyframes: Comment More infoAdvertise with us Next Article How to Create Jumping Text 3D Animation Effect using CSS ? T tirtharajsengupta Follow Improve Article Tags : Web Technologies CSS Similar Reads How to create text-fill animation using CSS ? A text-fill animation using CSS is a visual effect where the content of text gradually fills with a color, gradient, or pattern over time. This animation can create dynamic, eye-catching effects for headings or titles by adjusting properties like background-size, clip-path, or keyframe animations.Ap 2 min read How to create Drawing Effect Animation using CSS ? Drawing effect animation can be implemented using CSS animation. The used images can be modified or edited as per requirement. Save the images in SVG file format. The animation is created by drawing a simple art using lines and curved lines. The CSS stroke-dashoffset property defines the location al 2 min read How to make CSS Animations ? Animation is a way using which we can create the illusion of motion by placing still images one after another in a typical format. For example, we can have a ball rising up at some instant then falling down as an animation effect. CSS provides us with some properties to control the animation effect 3 min read How to Create Border Animation using CSS? Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction. 2 min read How to Create Jumping Text 3D Animation Effect using CSS ? In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. html <!DOCTYPE html> <html 4 min read How to create Candle Animation using CSS ? To create Candle animation, we take the basic approach of Pure CSS., Here we are using some animation techniques like move and rotate to create the Candle more effectively.Approach: First we create a container class. In container class, we create another class named candle-body and in this class, we 3 min read Like