3

I need to do an animation frame-by-frame changing a background-position of an element. I need to do this WITHOUT easing or linear animation, just changing the background-position. Is it possible to achieve with css3 animation?

Harsh Patel
  • 6,334
  • 10
  • 40
  • 73
rizidoro
  • 13,073
  • 18
  • 59
  • 86

1 Answers1

6

Yes it is via the new step-function easing curves property.

Instead of "ease-in" etc. use "step-start" or "step-end" which will make the transition happen instantaneously either at the beginning or end of the time period specified in transition-duration.

You can also have multiple steps: "steps(N, start | end ])" which will have the transition happen in equally spaced steps.

AFAIK this is only supported in Chrome to date.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105