How to Create A Simple Looping Background Colour Animation With CSS

In this tutorial, we are going to create a simple animated background colour animation which loops with pure CSS using keyframes along with various CSS animation properties.

In our example, we are going to set this to the body element. However, you can apply the code to any HTML element of your choice either with an id or class. You can check out the CodePen here if you prefer.

Before we begin, let’s understand the looping animation and how we want the end result to appear:

  • How many background colours do we want to use?
  • How long should total animation duration last?
  • What type of animation type should we use?

In this tutorial, we are going to keep things simple and use:

  • Five different background colours
  • A duration of ten seconds (each color gets displayed two seconds)
  • A linear animation curve (the animation has the same speed from start to end)

We used Coolers.co to generate a nice colour palette for our example:

If you want to use the same colour palette then visit this link.

These are the hex colours for the background animation we used in our example:

  • Sunset Orange: #EE6055;
  • Medium Aquamarine: #60D394;
  • Pale Green: #AAF683;
  • Mellow Yellow: #FFD97D;
  • Vivid Tangerine: #FF9B85;

Right, so lets now dig into it!

How to Create the looping CSS animation

The CSS animations keyframes work in percentages from 0% to 100%. So let’s start by adding the following CSS code:


@keyframes backgroundColorPalette {
  0% {
    background: #ee6055;
  }
  25% {
    background: #60d394;
  }
  50% {
    background: #aaf683;
  }
  75% {
    background: #ffd97d;
  }
  100% {
    background: #ff9b85;
  }
}

We have now created the keyframe property called backgroundColorPalette with five separate intervals; these have been dividing evenly between 0% and 100%.

With this part done, now we can create the CSS rules to animate the body and put our backgroundColorPalette keyframes to action.

Now, let’s add the following CSS animation properties inside your body selector:


body {
  animation-name: backgroundColorPalette;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

If you’ve done everything correctly, you will now have a background colour animating evenly between five different colours with a linear animation. Pretty cool aye?

So how does the CSS work exactly?

  • First of all, we added the animation-name property and set the value to backgroundColorPalette. Now the background colour keyframes we previously created were then assigned to the body element.
  • We used the animation-duration property and gave it a value of 10s – This sets the total duration time to ten seconds to process the keyframes we defined.
  • We used the animation-iteration-count property and set the value to infinite. This is so the animation can run in a constant loop and run indefinately.
  • We used the animation-direction property and give it a value of alternate. What this does is it makes the animation play from beginning to end, and from the end to the beginning. We use this property value to avoid an not so attractive jump which happens if you use the normal animation direction value.

And there you have it, liked our tutorial? Then drop us a comment below. If you need any help or further explanation then get in touch!

Live Example

So we decided to create this animation below so you could see how it looks like. We added this HTML; <div id="background-transition"><h3>ANIMATED BACKGROUND</h3></div> then simply replaced body with the ID of the DIV element which in our example is; #background-transition

ANIMATED BACKGROUND

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Create a Floating Animation using CSS

If you are looking to create a floating animation just using CSS, then you are in the right place.

Alternatively, you can visit the CodePen to see the animation in action.

In our example, the key things we need to add are:

transition property to move the element smoothly, over a given duration
@keyframes property which specifies the animation code
animation property which applies an animation between styles
transform property which allows you to move, rotate, scale, and skew elements

In our example, we are using transform: translate([value]); to move the element up and down.

The Code

HTML


<div class="container">
  <div class="logo">
    <a href="https://silvawebdesigns.com/">
      <img src="https://silvawebdesigns.com/silva-circle.png" alt="Silva Web Designs" />
    </a>
  </div>
  <div class="content">
    <h1>Floating CSS Animation</h1>
    <p>Follow Silva Web Designs:</p>
    <p>
      <span><a href="https://twitter.com/silvawebdesigns" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a></span>
      <span><a href="http://instagram.com/silvawebdesigns" target="_blank" rel="noopener noreferrer"><i class="fa fa-instagram"></i></a></span>
      <span><a href="https://www.linkedin.com/company/silvawebdesigns" target="_blank" rel="noopener noreferrer"><i class="fa fa-linkedin"></i></a></span>
    </p>
  </div>
</div>

CSS


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,[email protected],500;0,600;1,300&display=swap');

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
	background: rgb(71, 71, 181);
	background: -moz-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 181, 1) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 181, 1) 100%);
	background: linear-gradient(135deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 182, 1) 100%);  
  font-weight: 600;
}

h1 {
  font-size: 24px;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
  color: #FFF;
}

p {
  font-size: 16px;
  color: #FFF;
}

span a {
  font-size: 18px;
  color: #FFF;
  text-decoration: none;
  margin: 0 10px;
  transition: all 0.4s ease-in-out;
}

span a:hover {
  color: #FFF;
}

@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  border: 5px #20232c solid;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;
}

.logo img {
  width: 100%;
  height: auto;
}

.content {
  width: 100%;
  max-width: 600px;
  padding: 20px 40px;
  box-sizing: border-box;
  text-align: center;
}

.fa {
  font-size: 38px;
  margin-top: 20px;
}

And there you have it! A nice, smooth floating animation made purely in CSS. If you need any help, just give us a shout!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share