Tutorials
Start Learning
Learn HTML
Learn CSS
Learn JavaScript
TUTORIALS
THE WORLD'S LARGEST WEB DEVELOPER SITE
Edit & Run
<!DOCTYPE html> <html> <head> <style> #myDIV { width: 300px; height: 200px; border: 1px solid black; -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ animation: mymove 5s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { 50% {border-top: 15px solid lightblue;} } /* Standard syntax */ @keyframes mymove { 50% {border-top: 15px solid lightblue;} } </style> </head> <body> <p>Gradually change the border-top property:<p> <div id="myDIV"></div> <p>The border-top is a shorthand property for all border-top properties.</p> <p>See individual border-top properties to see which is <em>animatable</em>.</p> <p><b>Note:</b> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p> </body> </html>
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
Top References
HTML Reference
CSS Reference
JavaScript Reference
Top Examples
HTML Examples
CSS Examples
JavaScript Examples
Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate