html - Customer Loading Animation Keyframe/Background Position -
i'm trying create custom loading spinner using keyframes , spritesheet.
jsfiddle: http://jsfiddle.net/flignats/aaaaaf6h/
my issue spinner appears sliding (background position) , i'd stationary while spinning.
my css:
.hi { width: 68px; height: 68px; background-image: url("data:image/png;base64, ... ); -webkit-animation: play 1s steps(23) infinite; -moz-animation: play 1s steps(23) infinite; -ms-animation: play 1s steps(23) infinite; -o-animation: play 1s steps(23) infinite; animation: play 1s steps(23) infinite; } @-webkit-keyframes play { { background-position: 0px; } { background-position: -1496px; } } @-moz-keyframes play { { background-position: 0px; } { background-position: -1496px; } } @-ms-keyframes play { { background-position: 0px; } { background-position: -1496px; } } @-o-keyframes play { { background-position: 0px; } { background-position: -1496px; } } @keyframes play { { background-position: 0px; } { background-position: -1496px; } }
Comments
Post a Comment