HTML CSS examples for CSS Animatable Property:border-top
Only the border-top-width, and border-top-color properties are animatable in CSS among all the individual border-top properties.
The border-style property is not animatable.
-webkit- prefix is for Chrome, Safari, Opera.
-moz- prefix is for Firefox.
<!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS border-top Property Animation</title> <style type="text/css"> .animated {<!--from w w w .ja v a2s. c o m--> width: 300px; padding: 40px 0; font: bold 50px sans-serif; text-align: center; background: #EEEEEE; border: 2px solid red; -webkit-animation: test 4s infinite; animation: test 4s infinite; } @-webkit-keyframes test { 50% {border-top: 20px solid indigo;} } @keyframes test { 50% {border-top: 20px solid indigo;} } </style> </head> <body> <p> </p> <div class="animated"> Box </div> </body> </html>