CSS3 Color Changing Background

In one of my previous posts, I explained how easy it is to create a card flipping animation with CSS3 properties. In this post, we are going to build a color changing background with CSS3 animation properties.

To create this effect we are going to take advantage of keyframes.

See Also : Simple Image Zoom Effect With CSS3 Properties


HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>Color Changing Background</title>
</head>
<body>
	<!-- content -->
</body>
</html>

Our markup consist plain HTML layout. In this example, we are going to apply animation properties directly to the <body> tag, but you can also use it with a <div> element.

CSS:

body{
	margin: 0px;
	width: 100%;
	height: 100%;
	background-color: #120000;
	-webkit-animation: color 8s infinite alternate;
	animation: color 8s infinite alternate;
}
@-webkit-keyframes color {
	0%  {background-color: #120000;}
	25% {background-color: #FFAB60;}
	50% {background-color: #FC4605;}
	75% {background-color: #FFFFFB;}
	100%{background-color: #060000;}
}
@keyframes color {
	0%  {background-color: #120000;}
	25% {background-color: #FFAB60;}
	50% {background-color: #FC4605;}
	75% {background-color: #FFFFFB;}
	100%{background-color: #060000;}
}

As you can see, we are changing background-color on 0, 25, 50, 75 and 100. Also, we are using animation property to trigger the animation on body tag. This property accepts four parameters that are name of animation, duration, iterations and direction.

Note: This effect will work only with web browsers that support keyframe animations.

0 Comments

Leave a Comment.