HTML CSS examples for CSS Animation:Size
Enlarge div one by one in animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> @-webkit-keyframes width-1 { 0% {<!-- w w w . j a va2 s. co m--> width: 100px; } 17% { width: 500px; } 33% { width: 100px; } } @-webkit-keyframes width-2 { 33% { width: 100px; } 50% { width: 500px; } 66% { width: 100px; } } @-webkit-keyframes width-3 { 66% { width: 100px; } 83% { width: 500px; } 100% { width: 100px; } } div { background: red; width: 100px; } #div1 { -webkit-animation: width-1 1s infinite linear; } #div2 { -webkit-animation: width-2 1s infinite linear; } #div3 { -webkit-animation: width-3 1s infinite linear; } </style> </head> <body> <div id="div1"> Div1 </div> <div id="div2"> Div2 </div> <div id="div3"> Div3 </div> </body> </html>