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 PHP

Sometimes we need to allow our users to upload multiple file upload. On my previous post I was shown the basic of simple file upload with PHP. Today I am going to show you how to allow users to upload multiple files. It is almost similar like simple file upload but we need to do some modification with html markup and php code. multiple attribute is needed to add on the html markup. Major web browsers like Firefox, Chrome, Safari and IE 9+ support this attribute. Now I am going to show you how to upload multiple file with PHP and basic HTML form.

Live Comment System with jQuery Ajax PHP and MySQL

Recently I have been made a post that focused on how to submit form without page refreshing. That post shows the basic functionality of using jQuery Ajax. On the same follow this post will describe how we can create a comment system to post an instant comment without page refreshing. Let's start...

Resize Image While Uploading with PHP

On my previous post I was shown an example how to upload file with php and html. It was based on php simple image upload functionality. Today I am going to show you little bit advance of image uploading. Suppose if you run a website and want to allow users to upload image files than you need to think little bit about server's space and bandwidth. For this purpose you need to do some optimization with image files. Image resize while uploading is one of them. All major website do it in the same way. If a user uploads a 5mb image file they resize it in different sizes and store on there server. It helps them to seed up there website and reduce there budget. Now take a look, how we can do it ourself.