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:
-
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;"
>w3wiki</
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;" >w3wiki</ 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:
Contact Us