CSS Animation
CSS3 Animation
Animative Web Product. Responsive HTML5 & CSS3 coding.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<link href=’https://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’>
<link href=”style/animation.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div class=”animcontainer”>
<div class=”bgentry”></div>
<div class=”topgirl”></div>
<div class=”textaa”>19 Years Later, We’re Still…</div>
<div class=”textab”>Growing, Innovating, Paying on time</div>
<div class=”buttonnacontainer”><input type=”button” value=”Signup now & Start making Money” id=”buttona”></div>
<div class=”bga”></div>
– – – – – – – – – –
<a class=”link” href=”#”></a>
<div class=”clear”></div>
</div>
</body>
</html>
body {font-family:’Oswald’, sans-serif; line-height:18px;}
* {margin:0; padding:0;}
.clear {clear:both;}
.animcontainer {width:961px; height:246px; background:url(../images/bg.jpg); position:absolute; overflow:hidden;}
.bgentry {
width:961px; height:246px; background:url(../images/bg.jpg); position:absolute;
-webkit-animation:bgentry 15s infinite; -webkit-animation-direction:normal; transition-timing-function:ease-in;
animation:bgentry 15s infinite; animation-direction:normal; transition-timing-function:ease-in;
}
@keyframes bgentry {
0% {left:0px; top:0px; opacity:1;}
100% {left:0px; top:0px; opacity:1;}
}
@-webkit-keyframes bgentry {
0% {left:0px; top:0px; opacity:1;}
100% {left:0px; top:0px; opacity:1;}
}
.topgirl {
width:320px; height:246px; background:url(../images/topgirl.png); position:absolute;
-webkit-animation:topgirl 15s infinite; -webkit-animation-direction:normal; transition-timing-function:ease-in;
animation:topgirl 15s infinite; animation-direction:normal; transition-timing-function:ease-in;
}
@keyframes topgirl {
0% {left:540px; top:0px; opacity:0;}
1% {left:540px; top:0px; opacity:0;}
3% {left:640px; top:0px; opacity:1;}
33% {left:640px; top:0px; opacity:1;}
34% {left:640px; top:0px; opacity:0;}
100% {left:640px; top:0px; opacity:0;}
}
@-webkit-keyframes topgirl {
0% {left:540px; top:0px; opacity:0;}
1% {left:540px; top:0px; opacity:0;}
3% {left:640px; top:0px; opacity:1;}
33% {left:640px; top:0px; opacity:1;}
34% {left:640px; top:0px; opacity:0;}
100% {left:640px; top:0px; opacity:0;}
}
.textaa {
font-size:24px; color:#82ff82; position:absolute;
-webkit-animation:textaa 15s infinite; -webkit-animation-direction:normal; transition-timing-function:ease-in;
animation:textaa 15s infinite; animation-direction:normal; transition-timing-function:ease-in;
}
– – – – – – – – – –
.link {width:961px; height:246px; left:0; top:0; position:absolute; display:block; cursor: pointer; z-index:8;}
Live View
Please click the button for live view
