在CSS中使用缓存步骤（）

我正在创建一个加载微调器，并且存在动画问题。在CSS中使用缓存步骤（）

精灵表贯穿22个步骤。我想在动画的开头和结尾使用缓动效果。当我添加缓动时，动画变为静态。

的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; } 
}

来源

2016-04-21 Flignats

的steps是定时中的一个（缓和）功能可用（并且不能使用多个宽松功能）。

阅读docs约The steps() class of timing-functions

的steps()函数表示法限定的阶梯函数除以输出值的域在等距步。

来源

2016-04-21 22:53:55

感谢您的信息！如果我删除了步骤功能并轻松定时，动画定时功能：轻松;动画不会保持静态。对此有何想法？ – Flignats

问题是缓动控制关键帧之间的插值。既然你在动画背景位置，'x'会以不同的速度动画（*基于缓动函数*），所以它不会进入预定义的步骤（*你会看到背景精灵在'x'位置不适合其容器*）。唯一的解决方案是使用线性缓动功能并手动创建多个控制速度的关键帧，但这很难保持或调整。 –

在CSS中使用缓存步骤（）

回答

相关问题