Web dev

Css3 background image animation

The CSS3 offers a lot of new features, one of them help us to simplify the animations on the HTML pages without using Javascript/Jquery or other difficult codes.

This article is about how to make an infinite background on the BODY TAG.
The css3 style below is tested only on the latest Chrome browser version.

Setup

The code is very simple:

  • the first part uses the @keyframe rule and defines the background images;
  • the second part “turns on” the animation on the body TAG with animation’s settings.

For setting up the @keyframe css rule is important to know how many images you want use, because it’s important to divide the total animation’s duration for each keyframes related to each images.

For example if you have 4 images, you will have background changes at 0%, 25%, 50%, 100% of the total animation timing.

The simple formula is: 100% total timing / number of images.

CSS3 style

/* Safari and Chrome */
@-webkit-keyframes changeBg
{
   0%   {background-image: url("images/img1.jpg");}
   25%  {background-image: url("images/img2.jpg");}
   50%  {background-image: url("images/img3.jpg");}
   100% {background-image: url("images/img4.jpg");}
}

body
{
   -webkit-animation: changeBg 5s infinite;
}

In the example above you will see the chrome/safari notation with -webkit suffix.

The animation duration is 5 seconds with the infinite attribute, it enables an infinite animation loop.

Download

fullscreen_ background_slideshow (600kB .zip)

5 Comments

  • ciao,

    ho visto il tuo script ma noto nel primo ciclo una sorta di stacco tra le animazioni come se alle immagini scompaiano per un millisecondo per poi ricomparire.

    Questo problema l’ho riscontrato anche con miei script con un funzionamento simile.

    Si può risolvere? Hai trovato qualche soluzione?

    Grazie
    Luca

    • Ciao Luca, su che tipo di browser hai avuto il problema?
      Se il difetto succede solo al primo loop, potrebbe essere un ritardo di caricamento delle immagini dovuto alla connessione o alle immagini troppo pesanti.

    • A livello di CSS, non ci puoi fare molto. Potresti provare a ridurre le immagini oppure usare Javascript. Online si trovano facilmente plugin in JS per riprodurre lo stesso effetto.

Leave a Reply to luca X

This site uses Akismet to reduce spam. Learn how your comment data is processed.