Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS border-bottom-color Property Animation</title> <style> .animated { width: 300px; padding: 40px 0; font: bold 46px sans-serif; text-align: center; background: #f5d8f4; border: 20px solid orchid; -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */ animation: test 4s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes test { 50% {border-bottom-color: indigo;} } /* Standard syntax */ @keyframes test { 50% {border-bottom-color: indigo;} } </style> </head> <body> <p><strong>Warning:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p> <p><strong>Note:</strong> The color of the bottom border of the following DIV element is animating from its initial value "orchid" to "indigo", and back to the initial value "orchid" again up to infinite times.<p> <div class="animated">Box</div> </body> </html>
