Subtle (or not so) Background Animation

Recently my computer updated and while the updates were running a message appeared on the screen with a blue background.  The background kind of pulsed from light to dark blue and looked really neat.  It got me thinking how to make something similar for a website.

As an experiment, I have two demos.  The first is for the body tag and affects the entire background and fades smoothly between six different colors.  Here is the CSS that sets the colors:

@-webkit-keyframes rainbow {
  0% { background: #FFABAB; }
  20% { background: #FFDAAB; }
  40% { background: #DDFFAB; }
  60% { background: #ABE4FF; }
  80% { background: #D9ABFF; }
  100% { background: #FFABAB; }
}
@keyframes rainbow {
  0% { background: #FFABAB; }
  20% { background: #FFDAAB; }
  40% { background: #DDFFAB; }
  60% { background: #ABE4FF; }
  80% { background: #D9ABFF; }
  100% { background: #FFABAB; }
}

The effect is achieved by using @keyframes. In short, keyframes are a way to specify CSS styles which the browser will scroll through, doing each change in order with blending from one change to the other. I used percentages here to specify when the change will happen – so each color lasts 20% of the total animation running time.

Now we have to tell the browser which element to apply this animation to. See the “rainbow” right after @-webkit-keyframes (and @keyframes)? That is the name for this animation. We will use it to assign it to the body tag:

body {
  -webkit-animation: rainbow 15s infinite ;
}

Here we tell the browser to use the “rainbow” animation, make the whole animation last 15 seconds and keep looping around.

The image animation is done similarly.

@-webkit-keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}
@keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}

Notice that I called this animation “images”. Here is where I assign it to div with a class of “imagechanger”.

div.imagechanger{
	background-image: url(Colored_Pen_Background.JPG);
	height: 400px;
	width: 500px;
	background-size: contain;
	background-repeat: no-repeat;
 	-webkit-animation: images 15s infinite;
  	margin: auto;
	color: white;
}

In my demo the pictures are not the same size, which is why the height keeps changing. In real use as a background you would want the images sized appropriately and probably use “cover” instead of “contain” to make sure it spreads to fill the element. I also set a starting background-image so that there is an image already there when the page loads.

There is one more fix that needs doing when using images; you need to preload the images or the first time they appear there is a pause, the animation jumps, and it looks awkward. So I just add the images in a hidden div:

<div id="preload">
   <img src="Colored_Pen_Background.JPG" width="1" height="1" alt="Image 01" />
   <img src="IMG0.JPG" width="1" height="1" alt="Image 02" />
   <img src="IMG5.jpg" width="1" height="1" alt="Image 03" />
   <img src="IMG8.JPG" width="1" height="1" alt="Image 03" />
   <img src="IMG9.JPG" width="1" height="1" alt="Image 03" />
   <img src="IMG1.jpg" width="1" height="1" alt="Image 03" />
</div>

div#preload { display: none; }

If you look at Demo 2, you can see the images as a whole page background. Again, the images are not sized correctly, but you get the idea. I used some different animations settings, which you can find at W3Schools. Here is the code:

@-webkit-keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}
@keyframes images {
  0% { background-image: url(Colored_Pen_Background.JPG); }
  20% { background-image: url(IMG0.JPG); }
  40% { background-image: url(IMG1.jpg); }
  60% { background-image: url(IMG5.jpg); }
  80% { background-image: url(IMG8.JPG); }
  100% { background-image: url(IMG9.JPG); }
}

body{
	/*background-image: url(Colored_Pen_Background.JPG);*/
	background-size: cover;
	background-repeat: no-repeat;
 	-webkit-animation: images 30s infinite alternate;
	animation-timing-function: ease-in;
}

.imagechanger {
	width: 80%;
	margin: auto;
	min-height: 400px;
	background-color: #FCF7F7;
	border-radius: 25px;
	padding: 20px;
}
div#preload { display: none; }