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   Thanks in advance

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

You can use animated background-position property and sprite image

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  quot chunks quot   If you had 8 differents background  you need to do   100    8   12 5   to simplify you can let fall the decimals    gt  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    gt  2 4 seconds  You can adapt according to your needs

User · Answer

You can follow by this code    x000D   x000D   cd  x000D    position  relative  x000D    margin  0 auto  x000D    height  281px  x000D    width  450px  x000D    x000D   cf img  x000D    left  0  x000D    position  absolute  x000D    -moz-transition  opacity 1s ease-in-out  x000D    transition  opacity 1s ease-in-out  x000D    x000D   cf img top hover  x000D    opacity  0  x000D    x000D   lt div id  cf  gt  x000D     lt img class  button  src  Birdman jpg    gt  x000D     lt img src  Turtle jpg  class  top    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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     lt div id  cyclist  gt  lt  div gt    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

User · Answer

Updated for 2020  Yes  it can be done  Here s how  Snippet demo   x000D   x000D   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       x000D   lt div id  mydiv  gt  lt  div gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

I needed to do the same thing recently  Here s a simple implementation   x000D   x000D   wrapper   width 100   height 100   position relative    x000D   wrapper img   position absolute  top 0  left 0  width 100   height auto  display block    x000D   wrapper  top   animation fadeOut 2s ease-in-out  animation-fill-mode forwards    x000D   keyframes fadeOut   x000D    0    opacity 1    x000D    100    opacity 0    x000D    x000D   lt div id  wrapper  gt  x000D     lt img src  img1 jpg  class  top  style  z-index 2   gt  x000D     lt img src  img2 jpg  style  z-index 1   gt  x000D   lt  div gt  x000D   x000D   x000D

[css] Changing Background Image with CSS3 Animations

Examples related to css

Examples related to background-image

Examples related to css-animations