How to change the background color automatically with CSS3 animation ?

Description:- In this example I’m gonna show you guys how you can easily animate your background and texts without using WOW.js but using CSS3 animation properties.

<!doctype html>
<meta charset="utf-8">
*{padding:0px; margin:0px;}
 animation-direction:alternate reverse;
@keyframes demo
    0%{background:rgba(51,51,51,1); height:1000px; left:0px; top:0px;}
    25%{background:rgba(0,102,153,1);left:0px;  top:0px;}
    50%{background:rgba(0,204,204,1); left:0px;top:0px;}
    75%{background:rgba(153,204,0,1); left:0px;  top:0px;}
    100%{background:rgba(51,51,51,1); left:0px; top:0px;}

.box > h1{font-family:Roboto; font-weight:300; font-size:36px; color:rgba(255,255,255,1);margin-left:500px;
margin-top:250px; animation:text .9s 1 ease alternate; position:relative; float:left; } 

@keyframes text
    25%{margin-left:500px; transform:rotate(0deg);}
    50%{margin-left:500px; transform:rotate(10deg);}
    75%{margin-left:500px; transform:rotate(-10deg);}
    100%{margin-left:500px; transform:rotate(0deg);}

.box2 > h1{font-family:Roboto; font-weight:300; font-size:26px; color:rgba(255,255,255,1);
 animation:sectext 3s 1 ease-in alternate; position:fixed; top:320px; margin-left:620px; opacity:1;} 

@keyframes sectext



<div class="box">
<h1>Keyframe Animation</h1>

<div class="box2">
<h1>By CSS3</h1>



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s