231XP . reblog . 1 year ago . org . via


Sprite sheet animation with steps(). There is an over a year old jsFiddle but I never got around to post it.. until today! ;-)

If you don’t wanna use gifs on your site and rather PNGs for better colors, but still be able to animate them, here an option:

CSS keyframe animations have a property called animation-timing-function and one of the options is to use the steps() feature like in this example:

div {
    animation: play 1s steps(10) infinite;
@keyframes play { 
      0% { background-position:    0px 0; } 
    100% { background-position: -500px 0; }

The difference to the other easing options is that instead of continuously moving from 0px to -500px, it jumps in steps with pauses in between. This is perfect for animations using a sprite sheet. In the above example it’s steps of 50px with a pause of 100ms (10 steps in total).

Here a little demo.

As you saw, you can change the speed how fast the animation should play, which is pretty cool, the only problem is that it always starts from the beginning and makes it look jumpy. I also tried to animate the animation-duration by using inherit from a parent element, but unfortunately that is not supported. So I guess if you wanna have a more dynamic speed (animating the animation), you still need to use JS for that.

ps. Here an example found in the wild: The logo of Impending.

WOW this is what i like, explanations :D PS my firs upload of one of my drawings will be up soon and even better! (can it get better?) it will be of adventure time!

  1. apostolostaxidaridis reblogged this from simurai
  2. n4tl-l3n reblogged this from simurai
  3. livedreaming98 reblogged this from simurai
  4. 6-17am reblogged this from anninspirationalcloset
  5. anninspirationalcloset reblogged this from princessoftherose
  6. princessoftherose reblogged this from blackstarrr
  7. blackstarrr reblogged this from thoughtfulwonderings
  8. thoughtfulwonderings reblogged this from scifiguru
  9. scifiguru reblogged this from simurai and added:
  10. jaskat0 reblogged this from simurai
  11. arkie08 reblogged this from simurai and added:
    Cool so cool. i miss programming.. nice the way it gives option to see the previous and future state..
  12. toruta39 reblogged this from simurai
  13. madoberi reblogged this from simurai
  14. brainshockremix reblogged this from nicodoll
  15. mathiasreblogs reblogged this from simurai
  16. supersonicpolarflare reblogged this from simurai and added:
    WOW this is what i like, explanations :D PS my firs upload of one of my drawings will be up soon and even better! (can...
  17. leialdelaney reblogged this from thesnippetx
  18. kosardamla reblogged this from simurai