Multiple animated backgrounds with CSS

In this post, we will explain based on an example how to create multiple nested backgrounds by animating them with a little CSS3.

In this post: First steps with CSS animations we take the first steps on CSS animations.

Final CSS Animation:

This is our final animation:

As we will see throughout the animation development process, it is not necessary to use a single line of JavaScript in the process, only CSS.

Starting the animation development...

Our animation consists of 3 backgrounds which are the following:

The background of one of Twitter's backgrounds; this is a key point, if we look it is a quite long background that will give the sensation of movement:

The Twitter logo:

And, of course, a plane:

Remembering the CSS background-image property

To have multiple backgrounds in the same element, simply separate each one of them by commas (,) in the following way:

background-image: url(twitter.png), url(plain.png), url(clouds.png); 

The @keyframes for CSS animations

An animation is made up of frames; each keyframe describes how the animation will be rendered over the duration of the animation; for our example we will define three frames using the following form:

@keyframes animate {
0%   {background-position: 100px 120px, -400px 10px, 0 0;}
50%  {background-position: 100px 100px, -400px 10px, 50% 0;}
100% {background-position: 100px 120px, 700px 10px, 100% 0;}
}

Let's remember that with background-position we establish where the background of an image starts; the first value determines the horizontal position and the second the vertical:

background-position: x% y%; 

We see that for the animation of the twitter.png background we only vary the vertical axis:

@keyframes animate {
0%   {background-position: 100px 120px}
50%  {background-position: 100px 100px}
100% {background-position: 100px 120px}
}

Giving the sensation that the twitter.png is floating above the clouds.

Explaining the CSS animation

For the following animation of the plain.png background we see that at the beginning the plane is hidden on the left side of the container; for this we use negative measurements on the horizontal axis; to then increase them to a dimension greater than that of the container; giving the sensation that the plane is flying quickly over the clouds:

@keyframes animate {
0%   {background-position: -400px 10px}
50%  {background-position: -400px 10px}
100% {background-position: 700px 10px}
}

Finally, we quickly move the clouds by moving from one side of the image to the other on the horizontal axis:

@keyframes animate {
0%   {background-position: 0 0;}
50%  {background-position: 50% 0;}
100% {background-position: 100% 0;}
}

The animation property

Now all that remains is to start the animation; for this we use the following attribute:

animation: animated 4s linear infinite; 

Or what is the same

animation-name: animated;
animation-duration:4s;
animation-timing-function: linear;
animation-iteration-count: infinite;

Each of the four attributes with their respective value, represent:

• animation-name (animated): Specifies the name of the @keyframes to be animated.
• animation-duration (4s) : Specifies in seconds how long the animation will take to complete one cycle.
• animation-timing-function (linear) : Specifies the progress of the animation in each cycle; in this case we set it to linear to indicate that the animation will have the same speed from beginning to end.
• animation-iteration-count (infinite): Specifies how many times the animation will repeat upon completing a cycle; in our case it will be an infinite loop given by the value infinite.

Now let's see everything together once again:

Conclusions

In general, we saw our three backgrounds interact in a time of four seconds to complete the cycle in two well-defined stages:

0%   {background-position: 100px 120px, -400px 10px, 0 0;}
50%  {background-position: 100px 100px, -400px 10px, 50% 0;}

The first two seconds or what is the same, 50% of the animation (0% - 50%); we move our bird (twitter.png) on the vertical axis, our plane (plain.png) remains hidden and we move across 50% of our clouds (clouds.png) on the horizontal axis.

50%  {background-position: 100px 100px, -400px 10px, 50% 0;}
100% {background-position: 100px 120px, 700px 10px, 100% 0;}

The last stretch or the remaining 50% or the last two seconds of the cycle (whatever you want to call it); we place our bird (twitter.png) in its original position (this is so that there is no sudden jump when the current cycle ends and the other begins), our plane will quickly appear crossing from one end of the container to the other (plain.png) and we will move across the remaining 50% of our clouds (clouds.png).

Creating a live background with CSS

Live or animated backgrounds are one of the most valuable and visually appealing resources used on different platforms such as Android, iOS, Windows, etc.; although these backgrounds can be created very easily to be applied to a web page with a little CSS; as you can imagine we will use CSS Animations to create our live or animated background that looks like the following:

The same live background can be seen applied in this particular post.

Let's define the HTML and CSS for our live background

Each of those "boxes" or squares that rise from the bottom to the top of the web are li elements (one li per square) located across the entire width of the screen; different CSS properties are applied to these lis so that they obtain the following characteristics through CSS:

• Different sizes with the width and height properties.
• Different transparencies using RGBA colors through the background property.
• Variable time in the duration of the animations through the animation-duration property.
• Animation delay time through the animation-delay property.
• Variation of the position where they appear through the left property.

And what was explained above is the heart of our example and as you will have noticed with all these properties combined, a varied and distributed set of "boxes" is created that seems to appear randomly.

Let's look at the CSS for some lis:

.bg-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}
.bg-bubbles li:nth-child(16) {
  left: 75%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  background-color: rgba(255, 255, 255, 0.3);
}

The live background created and shown in this post is a resource taken and modified to taste from the following CodePen link.

Now continue practicing with CSS and learn how to create animated loaders with CSS