CODEWITHSUNDEEP
csscss-animations
fluxus
fluxus

Reputation: 559

CSS3 keyframe animation on 100% width/height backgrounds

I am trying to animate background of an element that is 100% wide and tall. It is a simple CSS3 animation using steps to go through the sprite image.

The animation looks like this:

.play-intro{animation: play 2s steps(6);}
@keyframes play {
from { background-position:    0 0 ; }
to { background-position:      -7800px 0 }
}

The issue is that I am seeing each sprite change, it is not working as it should be. I don't know, but I believe it is maybe due to background-size:cover property. Any advice on this?

I created a fiddle to recreate the issue: http://jsfiddle.net/QKwjM/1/

And this is the fiddle in fullscreen, the issue is best seen there. http://jsfiddle.net/QKwjM/1/embedded/result/

Upvotes: 1

Views: 1989

Answers (1)

vals
vals

Reputation: 64254

If you set 

background-size: cover;

the background-size is variable (adjusts to the space) and that breaks the animation.

Since your last keyframe is -7800px, the background-size-x must be exactly that

background-size: 7800px 701px;

Upvotes: 1

Related Questions