HTML CSS examples for CSS Animation:Keyframe
Css3 animation with keyframes to enlarge bar
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .expand {<!--from w w w . j a v a2 s .co m--> height: 25px; margin: 2px 0; position: absolute; } .expand.green { background: #8DD005; box-shadow: 0px 0px 7px 0px blue; } .expand.purple { background: #5a3266; box-shadow: 0px 0px 7px 0px #5a3266; } .animated.y2003 { width: 15%; -moz-animation: html5 2s ease-out; -webkit-animation: html5 2s ease-out; animation: html5 2s ease-out; } .animated.y2006 { width: 52.5%; -moz-animation: css3 2s ease-out; -webkit-animation: css3 2s ease-out; animation: css3 2s ease-out; } .animated.y2008 { width: 84.7%; -moz-animation: jquery 2s ease-out; -webkit-animation: jquery 2s ease-out; animation: jquery 2s ease-out; } .animated.y2011 { width: 77.5%; -moz-animation: photoshop 2s ease-out; -webkit-animation: photoshop 2s ease-out; animation: photoshop 2s ease-out; } .animated.y2014 { width: 100%; -moz-animation: dreamweaver 2s ease-out; -webkit-animation: dreamweaver 2s ease-out; animation: dreamweaver 2s ease-out; } @-moz-keyframes html5 { from { width: 5px; } to { width: 15%; } } @-moz-keyframes css3 { from { width: 5px; } to { width: 52.5%; } } @-moz-keyframes jquery { from { width: 5px; } to { width: 84.7%; } } @-moz-keyframes photoshop { from { width: 5px; } to { width: 77.5%; } } @-moz-keyframes dreamweaver { from { width: 5px; } to { width: 100%; } } @-webkit-keyframes'html5' { from { -webkit-transform-origin: 0 0; -webkit-transform: scale(0,1); } to { -webkit-transform-origin: 0 0; -webkit-transform: scale(1,1); } } @-webkit-keyframes'css3' { from { width: 5px; } to { width: 52.5%; } } @-webkit-keyframes'jquery' { from { width: 5px; } to { width: 84.7%; } } @-webkit-keyframes'photoshop' { from { width: 5px; } to { width: 77.5%; } } @-webkit-keyframes'dreamweaver' { from { width: 5px; } to { width: 100%; } } </style> </head> <body> <div class="content"> <h3>Animation demo</h3> <ul id="skill"> <li> <span class="animated expand y2003 green"></span> </li> <li> <span class="animated expand y2006 purple"></span> </li> <li> <span class="animated expand y2008 green"></span> </li> <li> <span class="animated expand y2011 purple"></span> </li> <li> <span class="animated expand y2014 green"></span> </li> </ul> </div> </body> </html>