HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; border: 1px solid #000; line-height: 6; text-align: center; margin-bottom: 20px; } @-webkit-keyframes myAnimation { from {border-radius: 0%;} to {border-radius: 50%;} } @keyframes myAnimation { from {border-radius: 0%;} to {border-radius: 50%;} } </style> </head> <body> <h1>CSS animation-name Property</h1> <div> Div </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.animationName = "myAnimation"; x.style.WebkitAnimationName = "myAnimation"; x.style.animationDuration = "2s"; x.style.WebkitAnimationDuration = "2s"; } </script> <p><strong>Note</strong>: Click on the button to start the animation for 2s.</p> </body> </html>
OUTPUT
×

Save as Private