CSS Animation to replace gif with sprite?

[TomB]

I have a sprite that contains various frames of an animation. I want to have control over it, pausing at particular frames using javascript.

I could put all the images into different files and the animations in a gif… but this seems overkill. I’d like to use CSS animations to animate background-position. However, currently it will animate over time and the background will slide. Is there any way to use CSS animations that will just set the values from keyframe1 e.g. position 0,0 then set the values from keyframe2 position 0,200. If I try this, it currently “slides” across during the duration of the element. What I want to happen is:

1. Display keyframe 1

2. Wait 0.1s

3. Display keyframe 2

4. wait 0.1s

5. Display keyframe 2

Is it possible to do this without animating the property so the transition between frames is instant rather than animated, but the delay between the frames still exists?

Or will I have to compile all the possible permutations of the animation into different gifs?

[RyanReese]

I feel like these links should help you out a bit. You’re after something not yet in CSS

http://www.standardista.com/animation-iteration-delay/

http://lists.w3.org/Archives/Public/www-style/2011May/0549.html

However, if you wanted to do the math (find out how many frames, etc)…then you could do something like I cooked up here. If you follow the math in this CSS, it’s 1 secod per slide. Should be a good start.

http://codepen.io/anon/pen/BjJRvE

[PaulOB]

@TomB

However, currently it will animate over time and the background will slide. Is there any way to use CSS animations that will just set the values from keyframe1 e.g. position 0,0 then set the values from keyframe2 position 0,200

If I understand correctly you just need to set the keyframe before the change to the same value and then change it suddenly.

e.g.This is a keframe that was sliding the background-position but ifwe change the values the change becomes almost instant.

@keyframes dissolve2 {
  0% {
    background-position: 0 0
  }
  24.9% {
    background-position: 0 0
  }
  25% {
    background-position: -110px -110px
  }
  49.9% {
    background-position: -110px -110px
  }
  50% {
    background-position: -220px -220px
  }
  74.9% {
    background-position: -220px -220px
  }
  75% {
    background-position: -330px -330px
  }
  99.9% {
    background-position: -330px -330px
  }
  100% {
    background-position: 0 0
  }
}

The image will change between 24.9% and 25% (rather than 0% - 25%) so the change is very quick. It does depend on the overall time of the animation but I still think it will be instant.

Here’s a codepen (although codepen seems to be crashing at the moment due to server load).

[SamA74]

There is a tutorial here on css sprite animation. It uses steps(#) to set the number of frames within the duration, which will stop the sliding and save you adding a bg-pos for every frame.

[PaulOB]

@SamA74

It uses steps(#)

I forgot about steps and that would do the job nicely
There’s a nice demo here using steps.

[TomB]

@SamA74

There is a tutorial here on css sprite animation. It uses steps(#) to set the number of frames within the duration, which will stop the sliding and save you adding a bg-pos for every frame.

Thanks everyone! this is exactly what I needed! I never knew about steps