CSS3 Sprite animation without tweening

Question

Read below for my final edit!

Is it possible to use CSS3 animation without animation between frames?

For example, I have an image in which there are two sprites characters. They are evenly spaced at 50 pixels. When I use the following animation, I still get the animation (although the animation is very fast, so it may look like a flicker).

#ball .animated{ -webkit-animation-name: animate; -webkit-animation-duration: .5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: linear;} @-webkit-keyframes animate{ 0%{-webkit-transform: translate3d(0,0,0);} 49%{-webkit-transform: translate3d(0,0,0);} 50%{-webkit-transform: translate3d(-50px,0,0);} 100%{-webkit-transform: translate3d(-50px,0,0);} 

So, based on the foregoing, the sprite frame should be held on the first part of the image (x = 0px) for the first 0-49% of the duration, and then go to the second part of the image (x = -50px) for 50-100%. However, 1% of the difference is still enough to visually see animations from 0 to -50px.

Thoughts?

Edit:

 -webkit-animation-timing-function: cubic-bezier(1,0,1,0); 

The above seemed to straighten up a bit, but after a while it returned to flicker.

Edit: I did not understand that you can use decimal numbers with percentages. Closing a space from 1% to 0.1% creates a much faster animation that is almost -webkit-animation-duration: (with -webkit-animation-duration: <1s;)

 0%{-webkit-transform: translate3d(0,0,0);} 49.9%{-webkit-transform: translate3d(0,0,0);} 50%{-webkit-transform: translate3d(-50px,0,0);} 100%{-webkit-transform: translate3d(-50px,0,0);} 

Final editing !: So, from what I found, the percentages of the web set animation will take a decimal number in a millionth place (i.e. 0.0001). Which with a relatively fast animation timer will result in instant translation. I guess a little hack, but this is a trick.

Example:

 @-webkit-keyframes sprite { 0% { -webkit-transform: translate3d(0,0,0); } 50% { -webkit-transform: translate3d(0,0,0); } 50.0001%{ -webkit-transform: translate3d(-50px,0,0); } 100%{ -webkit-transform: translate3d(-50px,0,0); } } 

The above example has a 100px image (each sprite in an image with a width of 50 pixels) inside the container div with width: 50px and overflow:hidden to display only one sprite from the image at a time.

Note. I use translate3d because it is hardware accelerated in mobile browsers where translateX, translateY, translateZ are not yet hardware accelerated.

Answer 1

Here is another great example using steps() .

This is a simple but powerful way to animate sprites. Below came an animation of the old duke.

 @keyframes wink { from { background-position: 0px; } to { background-position: -500px; } } .hi { width: 50px; height: 72px; background-image: url("http://i.stack.imgur.com/1Ad8o.png"); margin: 0 auto; animation: wink .8s steps(10, end) infinite; } 

 <img src="http://i.stack.imgur.com/1Ad8o.png"> <div class="hi"></div> 

There is a demo you can play with cssdeck .

Answer 2

It has been a while since this question was asked, but now CSS3 has a timing function, so I used this to animate sprites. From my codepen example at http://codepen.io/natedsaint/pen/2/7 :

 /* Animation keyframes */ @keyframes walk { 0% { background-position:0px 0px;} 16.67% { background-position:-104px 0px;} 33.33% { background-position:-208px 0px;} 50% {background-position:-320px 0px;} 66.66% { background-position:-416px 0px;} 80.65% { background-position:-520px 0px;} 100% { background-position:-624px 0px;} } #guyBrush { animation: walk infinite 1s steps(1,end); background-image:url('http://www.nathanstpierre.com/gb_walk.png'); width:104px; height:152px; position:absolute; top:160px; left:360px; } 

The advantage of this is that you can change the speed by changing the duration of the animation to a smaller number. I demonstrated this slider.

Answer 3

The general idea behind CSS animations is, well, animate. If you want something to move from position to position, you can simply consider setting a position directly through JavaScript and iterating through JavaScript.

However, if you want to use animation, you have several options. One sets the opacity of zero and back to one with two keyfill filler. Or, alternatively, changing the z-index to hide your animated object behind the div mask during translation. z-indices do not alternate.

UPDATE: The transition to step functionality was added to the specification and is now implemented in Chrome, so now what you wanted to do is possible.