Question

I'm creating a loading spinner and having issues with the animation.

The sprite sheet runs through 22 steps. I'd like to use an easing effect at the start and end of the animation. When I add easing, the 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 {
   from { background-position:    0px; }
     to { background-position: -1564px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -1564px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -1564px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -1564px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -1564px; }
}

Answer 1

steps是可用的时间（缓动）功能之一（，您不能使用多个缓动函数）。

阅读有关The steps() class of timing-functions

的文档

steps()功能表示法定义了以等距步骤划分输出值域的步进函数。

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

1 个答案: