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