css3 - Use ease-in-out with steps() in CSS -


i'm creating loading spinner , having issues animation.

the sprite sheet runs through 22 steps. i'd use easing effect @ start , end of animation. when add easing, animation goes static.

jsfiddle: https://jsfiddle.net/flignats/aaaaaf6h/3/

.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: -1564px; } }  @-moz-keyframes play {    { background-position:    0px; }      { background-position: -1564px; } }  @-ms-keyframes play {    { background-position:    0px; }      { background-position: -1564px; } }  @-o-keyframes play {    { background-position:    0px; }      { background-position: -1564px; } }  @keyframes play {    { background-position:    0px; }      { background-position: -1564px; } } 

the steps 1 of timing(easing) functions available (and cannot use multiple easing functions).

read docs the steps() class of timing-functions

the steps() functional notation defines step function dividing domain of output values in equidistant steps.


Comments

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

Why does Go error when trying to marshal this JSON? -