HTML CSS examples for CSS Animatable Property:border
Only the border-width, and border-color properties are animatable in CSS among all the individual border 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 Property Animation</title> <style type="text/css"> .animated {<!-- ww w .ja v a2 s. c om--> 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: 20px solid blue;} } @keyframes test { 50% {border: 20px solid blue;} } </style> </head> <body> <p> </p> <div class="animated"> Box </div> </body> </html>