html - CSS Sprite 动画使用带有非线性 Sprite 表的步骤而不是步进

Question

我有一个 spritesheet，我想使用 step() 来制作它的动画。

我能找到的所有 css 示例都使用 1xnumFrames 的 sprite 表我的 Sprite 表是 3x5。我正在寻找纯 CSS 解决方案。

我尝试了以下步骤，但我可以看到中间的步骤，而不是从一个步骤滑动到另一个步骤。

CSS

@-webkit-keyframes crystal-wave {
0.0% {background-position: 0px 0px;}
7.14286% {background-position: -270px 0px;}
14.28571% {background-position: -540px 0px;}
21.42857% {background-position: 0px -314px;}
28.57143% {background-position: -270px -314px;}
35.71429% {background-position: -540px -314px;}
42.85714% {background-position: 0px -628px;}
50.0% {background-position: -270px -628px;}
57.14286% {background-position: -540px -628px;}
64.28571% {background-position: 0px -942px;}
71.42857% {background-position: -270px -942px;}
78.57143% {background-position: -540px -942px;}
85.71429% {background-position: 0px -1256px;}
92.85714% {background-position: -270px -1256px;}
100.0% {background-position: -540px -1256px;}
}
@-moz-keyframes crystal-wave {
0.0% {background-position: 0px 0px;}
7.14286% {background-position: -270px 0px;}
14.28571% {background-position: -540px 0px;}
21.42857% {background-position: 0px -314px;}
28.57143% {background-position: -270px -314px;}
35.71429% {background-position: -540px -314px;}
42.85714% {background-position: 0px -628px;}
50.0% {background-position: -270px -628px;}
57.14286% {background-position: -540px -628px;}
64.28571% {background-position: 0px -942px;}
71.42857% {background-position: -270px -942px;}
78.57143% {background-position: -540px -942px;}
85.71429% {background-position: 0px -1256px;}
92.85714% {background-position: -270px -1256px;}
100.0% {background-position: -540px -1256px;}
}
@-o-keyframes crystal-wave {
0.0% {background-position: 0px 0px;}
7.14286% {background-position: -270px 0px;}
14.28571% {background-position: -540px 0px;}
21.42857% {background-position: 0px -314px;}
28.57143% {background-position: -270px -314px;}
35.71429% {background-position: -540px -314px;}
42.85714% {background-position: 0px -628px;}
50.0% {background-position: -270px -628px;}
57.14286% {background-position: -540px -628px;}
64.28571% {background-position: 0px -942px;}
71.42857% {background-position: -270px -942px;}
78.57143% {background-position: -540px -942px;}
85.71429% {background-position: 0px -1256px;}
92.85714% {background-position: -270px -1256px;}
100.0% {background-position: -540px -1256px;}
}
@keyframes crystal-wave {
0.0% {background-position: 0px 0px;}
7.14286% {background-position: -270px 0px;}
14.28571% {background-position: -540px 0px;}
21.42857% {background-position: 0px -314px;}
28.57143% {background-position: -270px -314px;}
35.71429% {background-position: -540px -314px;}
42.85714% {background-position: 0px -628px;}
50.0% {background-position: -270px -628px;}
57.14286% {background-position: -540px -628px;}
64.28571% {background-position: 0px -942px;}
71.42857% {background-position: -270px -942px;}
78.57143% {background-position: -540px -942px;}
85.71429% {background-position: 0px -1256px;}
92.85714% {background-position: -270px -1256px;}
100.0% {background-position: -540px -1256px;}
}

.crystal-waving {
/*width:14.94%;
height:23.31%;
left:22.66%;
top:37.24%;*/
border: solid thin red;
background: url("cc.png") no-repeat left top;
-webkit-animation: crystal-wave 5s steps(15) infinite; /* Safari 4+ */
-moz-animation:    crystal-wave 5s steps(15) infinite; /* Fx 5+ */
-o-animation:      crystal-wave 5s steps(15) infinite; /* Opera 12+ */
animation:         crystal-wave 5s steps(15) infinite; /* IE 10+, Fx 29+ */
}

html

<div class="crystal-waving" style="width:276px; height:372px;"></div>

这是纹理图集

<?xml version="1.0" encoding="UTF-16"?>
<TextureAtlas imagePath="button_cc.png">
<!-- Created with Adobe Flash CS6 version 12.0.2.529 -->
<!-- http://www.adobe.com/products/flash.html -->
<SubTexture name="Button_CC0000" x="0" y="0" width="270" height="314"/>
<SubTexture name="Button_CC0001" x="270" y="0" width="270" height="314"/>
<SubTexture name="Button_CC0002" x="540" y="0" width="270" height="314"/>
<SubTexture name="Button_CC0003" x="0" y="314" width="270" height="314"/>
<SubTexture name="Button_CC0004" x="270" y="314" width="270" height="314"/>
<SubTexture name="Button_CC0005" x="540" y="314" width="270" height="314"/>
<SubTexture name="Button_CC0006" x="0" y="628" width="270" height="314"/>
<SubTexture name="Button_CC0007" x="270" y="628" width="270" height="314"/>
<SubTexture name="Button_CC0008" x="540" y="628" width="270" height="314"/>
<SubTexture name="Button_CC0009" x="0" y="942" width="270" height="314"/>
<SubTexture name="Button_CC0010" x="270" y="942" width="270" height="314"/>
<SubTexture name="Button_CC0011" x="540" y="942" width="270" height="314"/>
<SubTexture name="Button_CC0012" x="0" y="1256" width="270" height="314"/>
<SubTexture name="Button_CC0013" x="270" y="1256" width="270" height="314"/>
<SubTexture name="Button_CC0014" x="540" y="1256" width="270" height="314"/>
</TextureAtlas>

Answer 1

我不确定您将如何使用 step() 完成此操作。通常我见过使用开始和结束条件指定的 step 动画，并让 step 为您处理补间。由于您在关键帧中指定了补间条件，因此您必须确保数学计算完全匹配，这是不可能的(100/14 不会给您一个可整除的数字)。

我真的会探索您可以使用线性 Sprite 表的方法。如果您的工作流程不支持开箱即用，也许您可​​以使用 ImageMagick 之类的工具在“发布”中重组它。将二维图像切片并将其重组为线性图像。

最后，如果您根本无法使用线性 sprite 表，我能想到的唯一解决方案是指定包含实际过渡点的“边界”关键帧，这样动画就会在很短的时间内发生时间:

0.0% {background-position: 0px 0px;}
7.14285% {background-position: 0px 0px;}
7.14286% {background-position: -270px 0px;}
14.28570% {background-position: -270px 0px;}
14.28571% {background-position: -540px 0px;}
...
etc.

DEMO

祝你好运。