Skip to main content

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

The HTML

First we need to a create simple html layout

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

The CSS

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!

Comments

  1. How do I get this to also work in FF?

    ReplyDelete
  2. Good post and I like it very much. By the way, anybody try this increase app downloads? I do not how to use.

    ReplyDelete

Post a Comment

Popular posts from this blog

Multiple File Upload with Progress Bar using PHP & jQuery

Some days age I have created a post that deals with How we can upload file with progress bar using php and jQuery. Some of my readers asked me how we can upload multiple files with progress bar. In this post I am going to show you how we can upload multiple files with progress bar.We can upload multiple files with progress bar exactly same way as I shown previous. But we need to do some modification with our file upload form and our php script to handle multiple files.

Force File Download with PHP

If you want to control or track your downloadable contents then a force file downloader script can give you more option. Especially if you want make images or other stemming contents like music file (mp3, wav, ogg), video files (flv, mp4, ogg, 3gpp), css, JavaScripts or even a php file downloadable then you must need to use a force file downloader script.
In this post I am going to share a simple but useful force file downloader script.

File Upload with Progress Bar using jQuery and PHP

In this post you will learn how to create a AJAX file uploading system with progress bar using jQuery and PHP. For this purpose we will going to use jQuery Form Plugin. It is a easy to use and powerful jQuery AJAX form submitting plugin. It supports XMLHttpRequest Level 2 and iframe file transportation. That's why it will work for both old and new browsers.