用 css 像闪烁一样移动长图

Question

从图中可以看出，它包括6个部分。我构建了一个包含这张图片的 div 40px x 40px。

overflow:hidden;

我想为这张照片设置动画效果，就像它在闪烁一样。看起来像：第一秒显示第一部分，第二秒显示第二部分。
【要求：请不要把动画做成从下往上滑的样子。 ]

这是我做的，没有工作。 1.using 关键帧，如 20%、40%、60%、80%、100%。添加顶部：-40，-80，...；但看起来我正在滑动图片。希望有人能帮助我。非常感谢。

Answer 1

您可以像这样使用应用于简单 CSS3 背景动画的 steps() 函数

http://codepen.io/anon/pen/JoEoPL

HTML

<div>Acquiring signal...</div>

CSS

div {
  background-repeat: no-repeat;
  background-image: url(http://i.stack.imgur.com/CAIVQ.png);
  width: 80px;
  height: 80px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;

  -webkit-animation: blinksignal 6s steps(6, end) infinite;
  animation: blinksignal 6s steps(6, end) infinite;
}


@-webkit-keyframes blinksignal {
  0%   { background-position: 0 0 }
  100% { background-position: 0 -480px }
}

@keyframes blinksignal {
  0    { background-position: 0 0 }
  100% { background-position: 0 -480px }
}

来自MDN

The steps() functional notation defines a step function dividing the domain of output values in equidistant steps. This subclass of step functions are sometimes also called staircase functions.

Answer 2

你是说这里的某事吗：http://jsfiddle.net/5jpasp1v/

我只是为每个状态添加了 3 个“div”元素，并将其更改为 css

HTML:

<div id="wifi">
    <div class="state state-1"></div>
    <div class="state state-2"></div>
    <div class="state state-3"></div>
</div>

CSS:

@keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.state-1 {...}
.state-2 {...}
.state-3 {...}

用 css 像闪烁一样移动长图

move a long picture like it's blinking with css

html

css

animation