HTML CSS examples for CSS Animatable Property:min-width
In the following code the min-width property of the div box is animating from its initial value "none" to "500px", and back to the initial value "none" again up to infinite times. The min-width property overrides the width property of the element.
-webkit- prefix is for Chrome, Safari, Opera.
-moz- prefix is for Firefox.
<!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS min-width Property Animation</title> <style type="text/css"> .animated {<!-- w ww.j av a 2 s . com--> width: 150px; padding: 40px 0; font: bold 50px sans-serif; text-align: center; background: #EEEEEE; border: 1px solid red; -webkit-animation: test 4s infinite; animation: test 4s infinite; } @-webkit-keyframes test { 50% {min-width: 500px;} } @keyframes test { 50% {min-width: 500px;} } </style> </head> <body> <p> </p> <div class="animated"> Box </div> </body> </html>