HTML CSS examples for CSS Animation:Size
Animate percentage width of two divs
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #click {<!-- w w w . ja v a 2 s.c o m--> display:none; } label { border:1px solid teal; background:lightblue; padding:5px; border-radius:5px; font-family:arial; opacity:.7; cursor:pointer; } label:hover { opacity:.8; } label:active { opacity:1; } #click:checked ~ .progress div { width:30%; } .progress { background:red; height:25px; } .progress div { background:green; height:100%; width:0; transition:width 250ms ease-in; } </style> </head> <body> <input type="checkbox" id="click"> <label for="click">Click Me!</label> <br> <br> <div class="progress"> <div></div> </div> </body> </html>