Smooth CSS animation with sprite

Question

I have tried to animate my sprite and it is similar to this . I would appreciate if someone can show how to make it more smooth. I have only 3 images in my sprite with approx. 1 second delay, so the transition is quite bad.

I've tried to use:

from {
    -webkit-transform: translateX(..);
}
to { 
    -webkit-transform: translateX(..);
}

But it did not work. I would really appreciate any help.

Answer 1

try to add some transition effects like :

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;