<!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>