Win8 Loader Animation in CSS

Bailey_Florida

New Member
I made a copy of Win8 loader animation in CSS (see JSFidle) but it doesn't feel so ... windows like.\[code\]@-webkit-keyframes win8-dot1 { 0% { left: -30px; } 26% { left: 40.625% } 52% { left: 56.25%; } 78% { left: 98.83%; opacity: 1;} 79% { opacity: 0;} 100% { left: 98.83%; opacity: 0; }}\[/code\]For animation from \[code\]26%\[/code\] to \[code\]52%\[/code\], I think the change in property \[code\]left\[/code\] should be more. But if I do that, change it to \[code\]35%\[/code\] to \[code\]60%\[/code\] instead of \[code\]40.625%\[/code\] to \[code\]56.25%\[/code\], the spacing between the dots also increase while transition within \[code\]26%\[/code\] to \[code\]52%\[/code\] which I don't want. (And I don't understand why its happening).Can anyone come up with better values?http://jsfiddle.net/nNfAy/
 
Top