CODEWITHSUNDEEP
cssbackground-imagetransition
TorranceScott
TorranceScott

Reputation: 1527

Why is strange CSS Background image transition happening?

I ran into an interesting thing in chrome today. I had a transition set to change between 2 background images, and it works, but with interesting results. I made a pen to illustrate the issue:

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

It happens to fit well with what I was trying to accomplish, but I don't know why this is happening. I'd be happy if someone could explain it to me.

Upvotes: 0

Views: 146

Answers (1)

Axel
Axel

Reputation: 10772

My assumption is that it's applying a transition between the two background image sizes. Since one background image is larger than the other, it's transforming one image to the dimensions of the other, while at the same time fading it out.

To eliminate the transformation of the height/width on the image, just make both images the same dimensions.

Upvotes: 1

Related Questions