Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS border-left-width Property Animation</title> <style> .animated { width: 300px; padding: 40px 0; font: bold 46px sans-serif; text-align: center; background: #f5d8f4; border: 2px solid #d65fcf; -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */ animation: test 4s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes test { 50% {border-left-width: 20px;} } /* Standard syntax */ @keyframes test { 50% {border-left-width: 20px;} } </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 width of the left border of the following DIV element is animating from its initial value "2px" to "20px", and back to the initial value "2px" again up to infinite times.<p> <div class="animated">Box</div> </body> </html>
