CSS精灵动画使用的步骤与雪碧工作表是不线性的，而不是步进

Question

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

我可以找到的所有css示例都使用了一个雪碧表，即1xnumFrames，我的雪碧表是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为您处理the。因为你在你的关键帧中指定了推文条件，所以你必须确保数学匹配是准确的，这是不可能的(100/14不能给你一个可平分的数字)。

我真的想探索一下你可以使用线性雪碧片的方法。如果您的工作流不支持它，那么也许您可以在"post“中使用像ImageMagick这样的工具对2D图像进行重构，并将其重新组合成一个线性的。

最后，如果您根本无法使用线性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.

演示

祝好运。

Answer 2

您可能会发现这很有帮助：https://stackoverflow.com/a/30635504/2225439

或

请参阅此

<html>
    <head>
        <title>
            Sprite-Sheet Animation
        </title>
        <link rel=”stylesheet” type=”text/css” href=”main.css”>
    </head>
    <body>
        <div class=”animatedDiv”></div>
    </body>
</html>

CSS

.animatedDiv {
    width: 820px;
    height: 312px;
    background-image: url("https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg");
    -webkit-animation: play 2s steps(48) infinite;
    -moz-animation: play 2s steps(48) infinite;
    -ms-animation: play 2s steps(48) infinite;
    -o-animation: play 2s steps(48) infinite;
    animation: play 2s steps(48) infinite;
}
@-webkit-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-moz-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-ms-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@-o-keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}
@keyframes play {
    from {
        background-position: 0px;
    }
    to {
        background-position: -39360px;
    }
}