Animation with CSS3
CSS Animation: this css property used for animate css properties such as colour, background-color, height, width etc.. Eche animation need to be defined with the @keyfremes
I have made good example for you:
Demo
CSS Animation
The HTML Markup
<div id="cssanimation"> <div id="animationbox">CSS Animation</div> </div>
The CSS
<style>
@-webkit-keyframes resize {
0% {
padding: 0;
background-color:rgba(60,60,60,0);
height:0px;
width:0px;
border-radius:10px;
font-size:0px;
color:#FFF;
top:50px;
}
15% {
height:1px;
width:10px;
border-radius:10px;
background-color:rgba(60,60,60,4);
}
25% {
height:1px;
width:100%;
top:50px;
}
40% {
height:100%;
top:0;
background-color:rgba(60,60,60,1);
}
60% {
background-color:rgba(0,136,204,1);
font-size:0px;
}
70% {
font-size:40px;
}
100% {
background-color:rgba(12,170,244,1);
}
}
@-moz-keyframes resize {
0% {
padding: 0;
background-color:rgba(60,60,60,0);
height:0px;
width:0px;
border-radius:10px;
font-size:0px;
color:#FFF;
top:50px;
}
15% {
height:1px;
width:10px;
border-radius:10px;
background-color:rgba(60,60,60,4);
}
25% {
height:1px;
width:100%;
top:50px;
}
40% {
height:100%;
top:0;
background-color:rgba(60,60,60,1);
}
60% {
background-color:rgba(0,136,204,1);
font-size:0px;
}
70% {
font-size:40px;
}
100% {
background-color:rgba(12,170,244,1);
}
}
@-o-keyframes resize {
0% {
padding: 0;
background-color:rgba(60,60,60,0);
height:0px;
width:0px;
border-radius:10px;
font-size:0px;
color:#FFF;
top:50px;
}
15% {
height:1px;
width:10px;
border-radius:10px;
background-color:rgba(60,60,60,4);
}
25% {
height:1px;
width:100%;
top:50px;
}
40% {
height:100%;
top:0;
background-color:rgba(60,60,60,1);
}
60% {
background-color:rgba(0,136,204,1);
font-size:0px;
}
70% {
font-size:40px;
}
100% {
background-color:rgba(12,170,244,1);
}
}
@keyframes resize {
0% {
padding: 0;
background-color:rgba(60,60,60,0);
height:0px;
width:0px;
border-radius:10px;
font-size:0px;
color:#FFF;
top:50px;
}
15% {
height:1px;
width:10px;
border-radius:10px;
background-color:rgba(60,60,60,4);
}
25% {
height:1px;
width:100%;
top:50px;
}
40% {
height:100%;
top:0;
background-color:rgba(60,60,60,1);
}
60% {
background-color:rgba(0,136,204,1);
font-size:0px;
}
70% {
font-size:40px;
}
100% {
background-color:rgba(12,170,244,1);
}
}
#cssanimation {
height: 100px;
width: 100%;
margin: 0 auto;
}
#cssanimation #animationbox {
height: 100%;
width: 100%;
border-radius: 10px;
background-color: rgba(0,136,204,1);
font-size: 40px;
color: #FFF;
text-align: center;
line-height: 100px;
margin: 0 auto;
top: 0;
position: relative;
-webkit-animation-name: resize;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: resize;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-o-animation-name: resize;
-o-animation-duration: 5s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
animation-name: resize;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</style>
CSS3 animation is a Good working in all most latest browser like Chrome 4+, Safari 4.0+, Firefox 5.0+, IE 10.0+, Opera 12.0+.