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; }
Diane Ensey
Latest posts by Diane Ensey (see all)
- Tables That You Can Sort and Search - May 24, 2017
- Responsive Newspaper-Style Columns are Easy with CSS - May 23, 2017
- Use Tooltips to Add Context - May 22, 2017