How to dynamically create ‘@-Keyframe’ CSS animations?
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:
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
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()
dynamicAnimation( 'newAnimation' , text.value);
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:
Last Updated :
31 Aug, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...