G_test_00 G_test_00 - 2 months ago 6x
CSS Question

How to create animation frame-by-frame appearance of the tick

I have a picture.How to create animation frame-by-frame appearance of the tick?


How can I do that?


You could use CSS animations to move the background-image in different steps, or replace it.

But, I would not do this example frame by frame. It would be better to put the tick in a separate image and 'unveil' by animating the width. Either with CSS animation or transition, depends on the situation.

Here is an example using your image, without separate image for the tick. Unfortunately, your image does not have an empty state of the circle.

.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 class="foo2">