如何创建滴答帧的动画逐帧外观

Question

我有一张照片。如何创建动画的逐帧外观动画？

我该怎么做？

Answer 1

您可以使用CSS动画以不同的步骤移动背景图像，或者替换它。

但是，我不会一帧一帧地做这个例子。最好将刻度线放在单独的图像中，并通过设置宽度来“揭开”。无论是CSS动画还是过渡，都取决于具体情况。

以下是使用您的图片的示例，没有单独的图像用于刻度线。很遗憾，您的图片没有圆圈的空状态。

.foo1, .foo2 {
  width: 100px;
  height: 100px;
  transition: .5s all ease;
  background-image: url('http://i.stack.imgur.com/gzzRl.png');
  position: absolute;
}

.container {
  position: relative;
}

.foo2 {
  background-position: -202px 0;
  width: 0;
}

.container:hover .foo2 {
  width: 100px;
}

<div class="container">
  <div class="foo1">
  </div>
  <div class="foo2">
  </div>
</div>