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)