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; }
- 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