How to make CSS animation jump rather than slide


Tags: html,css,css3

Problem :

I have the following animation... http://jsfiddle.net/5vwjy/1/

EDIT: Updated fiddle for all browsers... http://jsfiddle.net/5vwjy/2/

Using the following CSS...

.box {
  display:block;
  width:240px;
  height:100px;
 background: red url("http://southwestphotobooths.co.uk/sites/all/themes/SWPB/images/check_availability.png") no-repeat;
  text-indent:-9999px;
  position:absolute;
  -webkit-animation-name: change;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: steps(21);
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
}

@-webkit-keyframes change {

  0%    {top:0px;left:0px;background-position: 0px 0px;}
  5%    {top:0px;left:0px;background-position: -240px 0px;}
  10%   {top:0px;left:0px;background-position: -480px 0px;}
  15%   {top:0px;left:0px;background-position: -720px 0px;}
  20%   {top:0px;left:0px;background-position: -960px 0px;}
  25%   {top:0px;left:0px;background-position: -1200px 0px;}
  30%   {top:0px;left:0px;background-position: -1440px 0px;}
  35%   {top:0px;left:0px;background-position: -1680px 0px;}
  40%   {top:0px;left:0px;background-position: -1920px 0px;}
  45%   {top:0px;left:0px;background-position: -2160px 0px;}
  50%   {top:0px;left:0px;background-position: -2400px 0px;}
  55%   {top:0px;left:0px;background-position: -2640px 0px;}
  60%   {top:0px;left:0px;background-position: -2880px 0px;}
  65%   {top:0px;left:0px;background-position: -3120px 0px;}
  70%   {top:0px;left:0px;background-position: -3360px 0px;}
  75%   {top:0px;left:0px;background-position: -3600px 0px;}
  80%   {top:0px;left:0px;background-position: -3840px 0px;}
  85%   {top:0px;left:0px;background-position: -4080px 0px;}
  90%   {top:0px;left:0px;background-position: -4080px 0px;}
  95%   {top:0px;left:0px;background-position: -4080px 0px;}
  100%  {top:0px;left:0px;background-position: -4080px 0px;}

}

It works over 21 steps, using a really wide png to act as frames based on background position.

I can only get the animation to tween, rather than jump in stages.

How do I make it jump from frame to frame, rather than slide?



Solution :

Make changes to your css like:

-webkit-animation-timing-function: steps(1);
-moz-animation-timing-function: steps(1);
animation-timing-function: steps(1);

Tweak them with different values to get desired animation , currently they show and stop at each of 21 frames. JSFiddle here : CLICK


    CSS Howto..

    links are showing up on each line, instead of inline

    How to change the CSS after image lazy loading (jQuery)? [closed]

    How to implement a navbar with HTML / CSS

    How could I have an iframe that shows the target page and all it's elements at 50% scale?

    How to align banner right in Internet Explorer 8

    how to 3D rotate a 'a' tag?

    How to add atributes on pic stored from database [closed]

    How to make Gravity Forms Responsive (left/right )?

    How to get length of elements with a certain css attribute?

    How I do edit the css for just the home page on Magento?

    How do I override the default layout

    How to make a colorful gradient glow around your input-box?

    How to style all the same XSL FO elements? XSL FO like CSS?

    Only show one hidden table row at a time

    cannot figure out how to make text appear inside div after hover animation

    How to Apply CSS to Facebook Login Button [closed]

    How to edit the CSS of a div that does not contain a H1 tag?

    How is struts finding css files?

    How to do such layout with html+css?

    How to display a border-bottom only if table cells are not empty (CSS)

    How to denote common class names with slight numeral changes into one - CSS shorthand?

    How to achieve this complex layout with CSS?

    Bootstrap “jumbotron-narrow” example. how does the style change?

    How to make an element's position absolute in page, despite an ancestor having absolute position

    How to fade-in and fade-out background-image with CSS transition?

    How do I center these three blocks horizontally?

    How to ensure updated files are served instead of cached ones?

    How does Outlook.com have the title text underlined?

    How to set the specificity of a css over-ride class for XPages

    How do I get Jquery to toggle display