G_test_00 G_test_00 - 1 year ago 73
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?

Answer Source

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">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download