为什么css动画不适用于背景大小100%

时间:2017-07-27 11:10:35

标签: css css-animations css-sprites

我正在使用带有步骤的css动画......我的问题是:

  • 当step()==(帧长度-1)时,一切都流畅,我看不到最后一帧

  • 当step()==帧长度时,我仍然看不到最后一帧,动画很乱......

我正在寻找一种方法来使用100%的背景(或至少解释为什么它不起作用),因为我可以使用不同帧数的精灵,只需使用step()来调整到实际的精灵..

演示:

#sprite1, #sprite2, #sprite3 {
  height: 41px;
  width: 41px;
  background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') 0 center;
}

#sprite1 {
  animation: sprite 1s steps(3) infinite;
}

#sprite2 {
  animation: sprite 1s steps(4) infinite;
}

#sprite3 {
  animation: sprite2 1s steps(4) infinite;
}


@keyframes sprite {
    100% { background-position: right center; }
}

@keyframes sprite2 {
    100% { background-position: 164px center; }
}
Case1: <br>
<div id="sprite1"></div>
Case2:
<div id="sprite2"></div>
What it should be:
<div id="sprite3"></div>

3 个答案:

答案 0 :(得分:1)

必需。动画持续时间的百分比。 法律价值观:

0-100% 来自(相同为0%) 至(相同为100%)

注意:您可以在一个动画中拥有许多关键帧选择器。

精神图像4开始50%所以我给了。检查以下示例代码。

&#13;
&#13;
#sprite1, #sprite2, #sprite3 {
  height: 41px;
  width: 41px;
  background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') 0 center;
}

#sprite1 {
  animation: sprite 1s steps(3) infinite;
}

#sprite2 {
  animation: sprite3 1s steps(3) infinite;
}

#sprite3 {
  animation: sprite2 1s steps(4) infinite;
}


@keyframes sprite {
    60% { background-position: right center; }
}

@keyframes sprite2 {
    100% { background-position: 164px center; }
}
@keyframes sprite3 {
    50% { background-position: right center; }
}
&#13;
Case1: <br>
<div id="sprite1"></div>
Case2:
<div id="sprite2"></div>
What it should be:
<div id="sprite3"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您需要将初始位置更改为background-position:-33% center;而不是background-position: 0 center;

在这种情况下,这四个步骤将如下工作:

  • step1:background-position: -33% center;将显示img4

  • 第2步:background-position: 0% center;将显示img1

  • 第3步:background-position: 33% center;将显示img2

  • 第4步:background-position: 66% center;将显示img3

&#13;
&#13;
#sprite1 {
  height: 41px;
  width: 41px;
  background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') -33% center;
}
#sprite1 {
  animation: sprite 1s steps(4) infinite;
}

@keyframes sprite {
    100% { background-position: right center; }
}
&#13;
<div id="sprite1"></div>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

尝试一下:

10 =帧/步; 对于Edge,您必须计算百分比;

@keyframes sprite{
  100%{
    background-position: calc(100% / (10 - 1) * 10) 0;
    background-position: 111.111% 0;/* Edge/IE */
  }
}

#container {
  width: 50px;
  height: 72px;
  animation: container 1s linear infinite;
}

@keyframes container {
  50% {
    width: 72px;
    height: 50px;
  }
}

#sprite {
  width: 100%;
  height: 100%;
  background-color: red;
  background-image: url(http://i.imgur.com/xtk0SCC.png);
  background-position: 0% 0;
  background-size: calc(100% * 10) 100%;
  background-repeat: no-repeat;
  animation: sprite 1s steps(10) infinite;
}

@keyframes sprite {
  100% {
    background-position: calc(100% / (10 - 1) * 10) 0;
    background-position: 111.111% 0;/* Edge/IE */
  }
}
<div id="container">
    <div id="sprite"></div>
</div>