CSS3 Color Changing Background

In this tutorial you will learn how to create color changing background with CSS3.

Previously we used only JavaScript or Flash for web animation. But now CSS3 gives us some ability to do animation with just only using CSS.

Here we are going to create a simple color changing background effect with webkit keyframes pulse animation.

Live Demo


First we need to a create simple html layout

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>CSS3 animating background color</title>
  <!--content appear here-->


Now we need to add some keyframes background colors with pulse effect for animation. Here I used five colors.

@-webkit-keyframes pulse {
  0% {background-color: #EA6045;}
  25% {background-color: #F8CA4D;}
  50% {background-color: #F5E5C0;}
  75% {background-color: #3F5666;}
  100% {background-color: #2F3440;}

Now we need to implement animation under the body tag. Here I set #EA6045 as key color. webkit-animation will run the animation with pulse effect, the interval of this animation is 10 seconds and it will run for infinity times.

body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #EA6045;
  -webkit-animation: pulse 10s infinite alternate;
Browser Support: This animation will work for only Chrome and Safari browsers!


Go to top