Changing Background Image with CSS3 Animations

Question

Why this isn't working? What am I doing wrong?

CSS

@-webkit-keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  -webkit-animation-name: test;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
}

DEMO

http://jsfiddle.net/hAGKv/

Your code can work well with some adaptation. See my complete response bellow ;-) — bArraxas, Jul 27 '20 at 08:12

score 39 · Answer 1 · edited Oct 27 '20 at 10:21

39

Updated for 2020: Yes, it can be done! Here's how.

Snippet demo:

#mydiv{ animation: changeBg 1s infinite; width:143px; height:100px; }
@keyframes changeBg{
   0%,100%  {background-image: url("https://i.stack.imgur.com/YdrqG.png");}
   25% {background-image: url("https://i.stack.imgur.com/2wKWi.png");}
   50% {background-image: url("https://i.stack.imgur.com/HobHO.png");}
   75% {background-image: url("https://i.stack.imgur.com/3hiHO.png");}
}

<div id='mydiv'></div>

~~Background image [isn't a property that can be animated][1] - you can't tween the property.~~

Original Answer: (still a good alternative) Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.

edited Oct 27 '20 at 10:21

ashleedawg

20,365
9
72
105

answered Sep 06 '11 at 11:56

Rich Bradshaw

71,795
44
182
241

Awesome – it's not part of the spec to allow this, though it's been in Webkit for a while now. When you say all modern, are you meaning Chrome, Safari 6+, Firefox, IE10+? Would be useful to clarify for future visitors to this page. (There's been 13,372 of them so far!) – Rich Bradshaw Jul 11 '13 at 15:05
Only webkit - just tested (this also includes Opera 15) – Anselm Jul 11 '13 at 19:45
Ah, that's what I thought. It's not part of the spec as I say, so it __shouldn't__ work, it's up to the rendering engine if it wants to do it or not. – Rich Bradshaw Jul 11 '13 at 20:04
Background images **could be animated** as of now – martin schwartz Jun 26 '18 at 20:23
This answer comes up early on google, So for future readers, it can now be done with keyframes : https://www.nicolapietroluongo.com/css/css3-background-change-effect/ – Stender Dec 16 '19 at 14:53

score 8 · Answer 2 · answered May 12 '12 at 21:13

8

It works in Chrome 19.0.1084.41 beta!

So at some point in the future, keyframes could really be... frames!

You are living in the future ;)

answered May 12 '12 at 21:13

Luke Stanley

1,274
1
16
32

score 6 · Answer 3 · answered Feb 02 '17 at 15:57

Works for me. Notice the use of background-image for transition.

#poster-img {
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  overflow: hidden;
  -webkit-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}

apaul · Answer 4 · 2013-03-25T17:18:11.490

This is really fast and dirty, but it gets the job done: jsFiddle

    #img1, #img2, #img3, #img4 {
    width:100%;
    height:100%;
    position:fixed;
    z-index:-1;
    animation-name: test;
    animation-duration: 5s;
    opacity:0;
}
#img2 {
    animation-delay:5s;
    -webkit-animation-delay:5s
}
#img3 {
    animation-delay:10s;
    -webkit-animation-delay:10s
}
#img4 {
    animation-delay:15s;
    -webkit-animation-delay:15s
}

@-webkit-keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}
@keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}

I'm working on something similar for my site using jQuery, but the transition is triggered when the user scrolls down the page - jsFiddle

score 4 · Answer 5 · edited May 23 '17 at 12:32

I needed to do the same thing as you and landed on your question. I ended up taking finding about the steps function which I read about from here.

JSFiddle of my solution in action (Note it currently works in Firefox, I'll let you add the crossbrowser lines, trying to keep the solution clean of clutter)

First I created a sprite sheet that had two frames. Then I created the div and put that as the background, but my div is only the size of my sprite (100px).

<div id="cyclist"></div>

#cyclist {
    animation: cyclist 1s infinite steps(2);
    display: block;
    width: 100px;
    height: 100px;
    background-image: url('../images/cyclist-test.png');
    background-repeat: no-repeat;
    background-position: top left;
  }

The animation is set to have 2 steps and have the whole process take 1 second.

@keyframes cyclist {
  0% {
    background-position: 0 0; 
   }
  100% { 
    background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px
   }
}

Thiago above mentioned the steps function but I thought I'd elaborate more on it. Pretty simple and awesome stuff.

To animate images changing immediately from one to the next, using this technique: image "sprite" + CSS animation "steps" worked well for me. In contrast, using the + opacity tehnique as mentioned by one above did not work as expected if I wanted an "inifinite" loop: the animation would be out of control and on top of each other. — Panini Luncher, Oct 27 '19 at 16:17

bArraxas · Answer 6 · 2020-07-27T10:04:32.260

Your code can work well with some adaptations :

div {
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  animation: animateSectionBackground infinite 240s;
}

@keyframes animateSectionBackground {
  00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
  12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
  25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
  37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
  50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
  62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
  75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
  87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}

Here is the explanation of the percentage to suit your situation:

First you need to calculate the "chunks". If you had 8 differents background, you need to do : 100% / 8 = 12.5% (to simplify you can let fall the decimals) => 12%

After that you obtain that :

@keyframes animateSectionBackground {
  00% { background-image: url(/assets/images/bg-1.jpg); }
  12% { background-image: url(/assets/images/bg-2.jpg); }
  25% { background-image: url(/assets/images/bg-3.jpg); }
  37% { background-image: url(/assets/images/bg-4.jpg); }
  50% { background-image: url(/assets/images/bg-5.jpg); }
  62% { background-image: url(/assets/images/bg-6.jpg); }
  75% { background-image: url(/assets/images/bg-7.jpg); }
  87% { background-image: url(/assets/images/bg-8.jpg); }
}

If you execute this code, you will see the transition will be permanantly. If you want the backgrounds stay fixed while a moment, you can do like this :

@keyframes animateSectionBackground {
  00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
  12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
  25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
  37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
  50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
  62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
  75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
  87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}

That mean you want :

bg-1 stay fixed from 00% to 11%
bg-2 stay fixed from 12% to 24%
etc

By putting 11%, the transtion duration will be 1% (12% - 11% = 1%). 1% of 240s (total duration) => 2.4 seconds.

You can adapt according to your needs.

score 2 · Answer 7 · answered May 21 '13 at 20:21

The linear timing function will animate the defined properties linearly. For the background-image it seems to have this fade/resize effect while changing the frames of you animation (not sure if it is standard behavior, I would go with @Chukie B's approach).

If you use the steps function, it will animate discretely. See the timing function documentation on MDN for more detail. For you case, do like this:

-webkit-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);

See this jsFiddle.

I'm not sure if it is standard behavior either, but when you say that there will be only one step, it allows you to change the starting point in the @keyframes section. This way you can define each frame of you animation.

score 1 · Answer 8 · answered Oct 22 '15 at 04:15

I needed to do the same thing recently. Here's a simple implementation

#wrapper { width:100%; height:100%; position:relative; }
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; }
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; }
@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}

<div id="wrapper">
  <img src="img1.jpg" class="top" style="z-index:2;">
  <img src="img2.jpg" style="z-index:1;">
</div>

score 1 · Answer 9 · answered Oct 06 '11 at 18:59

Like the above stated, you can't change the background images in the animation. I've found the best solution to be to put your images into one sprite sheet, and then animate by changing the background position, but if you're building for mobile, your sprite sheets are limited to less than 1900x1900 px.

score 0 · Answer 10 · edited Jul 31 '17 at 11:58

0

You can follow by this code:

#cd{
  position: relative;
  margin: 0 auto;
  height: 281px;
  width: 450px;
}
#cf img{
  left: 0;
  position: absolute;
  -moz-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#cf img.top:hover{
  opacity: 0;
}

<div id="cf">
  <img class="button" src="Birdman.jpg" />
  <img src="Turtle.jpg" class="top" />
</div>

edited Jul 31 '17 at 11:58

Mohammad Usman

37,952
20
92
95

answered Dec 28 '12 at 05:26

Toeur Tenh

71
4
14

– Toeur Tenh Dec 28 '12 at 05:26

score 0 · Answer 11 · answered May 22 '14 at 16:58

0

You can use animated background-position property and sprite image.

answered May 22 '14 at 16:58

BigBadAlien

236
3
8

score 0 · Answer 12 · answered May 17 '20 at 10:21

0

You can use the jquery-backstretch image which allows for animated slideshows as your background-images!

https://github.com/jquery-backstretch/jquery-backstretch Scroll down to setup and all of the documentation is there.

answered May 17 '20 at 10:21

Akhil Khanna

1

score -1 · Answer 13 · answered Nov 06 '12 at 10:37

-1

Well I can change them in chrome. Its simple and works fine in Chrome using -webkit css properties.

answered Nov 06 '12 at 10:37

Samarth Agarwal

2,044
8
39
79

Changing Background Image with CSS3 Animations

13 Answers13

Linked

Related