0

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.

Gyuzal
  • 1,581
  • 10
  • 52
  • 99
  • I don't think you can make this look smooth without adding multiple versions of the image inside the sprite. `steps` function is a stair-case and it will always jump from one point to another. If we change it to anything other than `steps` then your images will slide rather than give a rotating appearance. – Harry May 25 '16 at 09:11
  • Maybe there is a way to rotate single 2D image? – Gyuzal May 25 '16 at 09:16
  • Yes, there is. You can always rotate an image with perspective. – Harry May 25 '16 at 09:18
  • Should I use `rotateZ()`? and how to make half rotation ) – Gyuzal May 25 '16 at 09:21
  • But it won't give the same effect as your sprite (unless you go for complex 3D rotate). There would be no depth (as in, the first sprite which shows the side of the phone). – Harry May 25 '16 at 09:23
  • Right..ok, and can you advise how to make my current image responsive? – Gyuzal May 25 '16 at 09:27
  • Have a look at this thread - http://stackoverflow.com/questions/15458650/make-an-image-responsive-simplest-way :) – Harry May 25 '16 at 11:48
  • @Harry, yeah I know how to adjust image, but in my case I refer to image height (because I stop playing animation on the last image), i.e. `to { background-position: 0px -1135px; }` I tried to replace with `67%` but it doesn't seem to work :( – Gyuzal May 25 '16 at 12:12

1 Answers1

0

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;
Ajai Krishnan R
  • 135
  • 2
  • 15