CSS animation example 4: Book cover animation

CSS book coverFollowing code will create the book step by step using the CSS animation.

book cover animationĀ output

<html>
<head>
<style>
div#background
{
height:450px;
width: 350px;
background-color: #CCFF66;
opacity:1;
-webkit-animation: bg 10s linear 1 forwards;
animation: bg 10s linear 1 forwards;
position:absolute;
left:0px;
top:0px
}
div#verticalbox
{
height:450px;
width: 100px;
background-color: #0066FF;
position:absolute;
left:200px;
-webkit-animation: vb 2s linear 1;
animation: vb 2s linear 1;
}
div#horizontalbox
{
height:75px;
width: 350px;
background-color:#00CC66;
color:white;
position:absolute;
top:60px;
left:600px;
-webkit-animation: hb 2s linear 1 2s forwards;
animation: hb 2s linear 1 2s forwards;
}
p
{
position:absolute;
top:375px;
font-size:20px;
-webkit-animation: sush 0.5s linear 8;
animation: sush 0.5s linear 8;
}
img
{
height:200px;
width:350px;
position:absolute;
top:400px; left:600px;
-webkit-animation: photo 2s linear 1 4s forwards;
}
@-webkit-keyframes bg
{
0%{opacity:0;}
60%{opacity:1;top:0px; left:0px;}
100%{top:20%; left:20%;}
}
@-webkit-keyframes vb
{
from{top:600px;}
to{top:0px;}
}
@-webkit-keyframes hb
{
from{left:600px;}
to{left:0px;}
}
@keyframes bg
{
0%{opacity:0;}
60%{opacity:1;top:0px; left:0px;}
100%{top:20%; left:20%;}
}
@keyframes vb
{
from{top:600px;}
to{top:0px;}
}
@keyframes hb
{
from{left:600px;}
to{left:0px;}
}
@-webkit-keyframes photo
{
from{top:400px; left:600px;}
to{top:150px;left:0px;}
}
@keyframes photo
{
from{top:400px; left:600px;}
to{top:150px;left:0px;}
}
@-webkit-keyframes sush
{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@keyframes sush
{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
</style>
</head>

<body>
<div id=”background”>
<div id=”verticalbox”></div>
<div id=”horizontalbox”><center><h1>CSS tutorial</h1></center></div>
<p>by Sushrut zemse</p>
<img src=”http://seowebsiteblog.com/wp-content/uploads/2015/02/CSS-HTML.png”>
</div>
</body>
</html>

 

 

Comments

comments