CODEWITHSUNDEEP
javascriptcsscss-animations
Lennart
Lennart

Reputation: 1560

CSS3 animation change background-image without sliding

This is the current code I have

.jack_hitting{
        -moz-animation: jackhitting 0.5s infinite;
    }

    @-moz-keyframes jackhitting {  
        0% {  
          background-position: -8px -108px;
        } 

        20% {  
          background-position: -41px -108px;
        }

        40% {  
          background-position: -73px -108px;
        }

        60% {  
          background-position: -105px -108px;
        }

        80% {  
          background-position: -137px -108px;
        }

        100% {  
          background-position: -8px -108px;
        }
    }

and this cycles through the background image sliding to the next one, but i would rather have it not slide, so that it basically works like the following js code:

document.getElementById('id').style.backgroundPosition='-8px -108px';

Is there an effect that can do what I would like?

Thanks in advance :)

Upvotes: 0

Views: 1331

Answers (1)

isotrope
isotrope

Reputation: 1847

I think I found it: step-start (I think it's one of multiple that could do this in the animation-timing-function category)

animation: jackhitting 10s step-start infinite;

Long-form would be 

animation-name: jackhitting;
animation-duration:    10s;
animation-timing-function: step-start;
animation-iteration-count:    infinite;

Unfortunately, you'll have to prefix this for each browser for now.

Here's a fiddle to test it out: http://jsfiddle.net/Ym6b5/4/ (The div is much too big. I wanted you to see the background image move and see if it's what you were after)

The animation-duration is the total amount of time it'll take to go through your keyframes. The animation-delay that I thought was the delay between steps is the delay before the animation should start. http://dev.w3.org/csswg/css3-animations

Hope it's what you were looking for. Cheers, iso

Upvotes: 1

Related Questions