size cover fade transition without size transition

I have a div where I'm changing the background (using jQuery). These CSS3 rules allow the new background image to crossfade in nicely

transition: background-image 1s ease-in-out;
background: center center no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;

The issue is that the background size is also transitioning.

So if it switches from a portrait to a landscape background image, for example, while fading, the image gets squished vertically and then stretched horizontally. This can be a bit nauseating.

Is there any way to use background-size: cover but to only fade transition the background image itself without the background size?

---

That's just... weird. background-image isn't supposed to be animatable in the first place. On the other hand, background-size can be animated, but it's very clear from your CSS that you don't want to transition background-size . Yet, your browser chooses to animate it along with the image anyway.

Whatever your browser is doing, it's obviously ignoring the spec and just doing its own thing. Since background-image isn't animatable using CSS (I know Firefox and IE don't support it), and your background transition is already being handled with jQuery anyway, I suggest using jQuery instead of CSS to implement the crossfade to ensure it'll work consistently across browsers.

---

I worked around the unintended size animation by:

having two divs, absolutely positioned on top of each other

cycling their opacity (eg one to 0, and the other to 1)

putting the css transition on the opacity, rather than background-image.

This achieves a cross-fade between the background images of the divs. If you have more than 2 images to cycle, either use more divs, or change the background-image of the one you are setting the opacity to 1.

链接地址: http://www.djcxy.com/p/23792.html

上一篇: 用jQuery将样式表附加到iframe

下一篇: 大小封面淡入淡出转换没有大小过渡