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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"></head><body><h2style="color: green;">GeeksforGeeks</h2><divid="element"></div><formid="input"><textareaid="text"rows="10"cols="40"></textarea><br><buttontype="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 keyframeslet styleSheet =null;dynamicAnimation = (name,styles) => {// Creating a style element// To add the keyframesif(!styleSheet){styleSheet = document.createElement('style');styleSheet.type ='text/css';document.head.appendChild(styleSheet);}// Adding The KeyframesstyleSheet.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 StylesheetdynamicAnimation('newAnimation', text.value);// Timing and duration can be altered// As per user requirementsdocument.getElementById("element").style.animation ='newAnimation 3s infinite';});
Implementation Code:
<!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.
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: