“How to write animation without using JavaScript or Flash”?
A CSS animation allows animation for most of “HTML elements” without using JavaScript or Flash and it can be used to animate many other CSS properties such as color, background-color, height, or width.
When you used CSS animations, you must first specify some @keyframes rule for the animations.
CSS Syntax:-
div { width: 300px; height: 300px; background-color: red; animation-name: demo; animation-duration: 2s; color:#fff; } @keyframes demo { from {background-color: green;} to {background-color: pink;} }
Example as,
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 300px; background-color: red; animation-name: demo; animation-duration: 2s; color:#fff; } @keyframes demo { from {background-color: green;} to {background-color: pink;} } </style> </head> <body> <div><b>This is demo CSS for keyframes!</b></div> </body> </html>
The Live demo result as,
This is demo CSS for keyframes!