Why there is fading effect when using css3 animation to change a background image?

Question

When I use CSS3 animation to change a background infinitely between two images, the images will have a fading effect even if I use steps(2): http://jsfiddle.net/exdestroyer/hmb2m8ty/`

body{
        background: purple;
    }
        .rabbit{

            width: 130px; 
            height: 224px;
            background-size: 100%;
            animation: jump 2s infinite steps(2);
        }
        @keyframes jump{
            from{
                background: url(http://segmentfault.com/img/bVp56q);background-size: 100%;
            }
            to{
                background: url(http://segmentfault.com/img/bVp56r);background-size: 100%;
            }
        }`

So how to fix the problem and remove the effect?

score 0 · Answer 1 · answered Sep 27 '15 at 12:12

0

I think there is two way you can fix it leo.

First Use transition in your animation like that:

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Second Use a image with rotation transition instead of two image in your keyframe.

answered Sep 27 '15 at 12:12

Vahid Taghizadeh

997
8
9

I think transition is not a good way because I need it repeats infinitely and auto starts the effect when the page loads – Leo HellVen Sep 27 '15 at 12:48

score 0 · Answer 2 · answered Sep 27 '15 at 12:52

0

You shouldn't be animating background-image via CSS. It's not in the CSS spec, and it doesn't work in non-Webkit browsers. You're probably testing it with Chrome, but if you test with Firefox, Edge etc, you'll see there is no background showing on the screen.

answered Sep 27 '15 at 12:52

Buzinas

11,597
2
36
58

So the best way is using JavaScript? – Leo HellVen Sep 27 '15 at 12:55
Yeah, using Javascript is a good possibility. If you don't want to use it, there is an workaround [described here](http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations). – Buzinas Sep 27 '15 at 12:58

score 0 · Accepted Answer · answered Sep 27 '15 at 18:58

Why is this happening ?

When you set an animation where the initial keyframe is one image, and the final one is another, only those keyframes have a single image. All the intermediate stages have a varying degree of the one, mixed with the other.

Setting step(2) makes the animation to use only 2 of these intermediate values. One will be a solid image . But the other will have 50% of one and 50% of the other.

If you want an animation like this, using only 2 values, you need to set a radical change in the middle of the keyframes

body{
 background: purple;
}
.rabbit{
 width: 130px; 
 height: 224px;
 background-size: 100%;
 animation: jump 2s infinite;
}

@keyframes jump{
 0%, 49.9% {
  background: url(http://segmentfault.com/img/bVp56q);background-size: 100%;
 }
 50%, 100% {
   background: url(http://segmentfault.com/img/bVp56r);background-size: 100%;
 }
}

<div class="rabbit"></div>

Besides that, note that support for animating a background image change is still weak

Why there is fading effect when using css3 animation to change a background image?

3 Answers3