Monday, November 25, 2013

Animated Div transitions with CSS3

Used below code for animation 

<!-- :::::::::::::: HTML::::::::::::: -->

<div class="Animation-box"> </div>
<div class="Animation-box"> </div>
<div class="Animation-box"> </div>

<!-- :::::::::::::: CSS ::::::::::::: -->

.Animation-box {
float: left;
width: 20em;
height: 20em;
margin-left: 1em; margin-right: 1em;
background: #eee;
/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;
/* firefox 4+ */
-moz-transition-duration: 1s;
/* Opera */
-o-transition-duration: 1s;
}
@media (min-width: 721px) and (max-width: 960px){
.Animation-box {
width: 10em;
height: 10em;
/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;
/* firefox */
-moz-transition-duration: 1s;
/* Opera */
-o-transition-duration: 1s;
}
}
@media (max-width: 720px){
.Animation-box {
width: 5em;
height: 5em;
/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;
/* firefox */
-moz-transition-duration: 1s;
/* Opera */
-o-transition-duration: 1s;
}



Browser support in Chrome, Opera or Firefox 4+ .....

No comments:

Post a Comment