Animation with CSS3 transform

There are a lot of new features in CSS3 like fade in / fade out, scale and rotate, animation etc; which help us to beautify our website to give it a new look with CSS3 features.

In this post we are going to create an effective animation with the help of@keyframe. First we have to make some animation with the help of other CSS3 properties like in this example we are making the animation with transform and after that we can bind this animation to the selectors with help of CSS3 animation properties. Please take a look on the below code to make this animation.

CSS3 Animation

[buttons href=”http://webomnizz.com/demo/css3-animation/” title=”View Demo”]

HTML Part for Our CSS3 Animation:

<div id="box-container">
<div class="box">
<span class="icon-4x icon-arrow-down ico-arrow"></span>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="box">
<span class="icon-4x icon-beer ico-beer"></span>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="box">
<span class="icon-4x icon-bell ico-bell"></span>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

 

CSS Part:

#box-container{
width: 600px;
margin: 0 auto;
position: relative;
top: 0px;
}
.box{
width: 200px;
min-height: 300px;
background: #ffffff;
position: absolute;
box-shadow: 0 0 2px 0 #999;
transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
text-align: center;
}
.box span.ico-bell,
.box span.ico-arrow,
.box span.ico-beer{
position: absolute;
top: 50px;
left: 70px;
}
.box:hover span.ico-bell,
.box:hover span.ico-arrow,
.box:hover span.ico-beer{
animation: smalltobig 300ms ease;
-o-animation: smalltobig 300ms ease;
-ms-animation: smalltobig 300ms ease;
-webkit-animation: smalltobig 300ms ease;
-moz-animation: smalltobig 300ms ease;
}
.box h2{
top: 140px !important;
left: 5px;
font-size: 26px;
display: block;
}
.box:hover h2{
animation: toptobottom 300ms ease;
-moz-animation: toptobottom 300ms ease;
-o-animation: toptobottom 300ms ease;
-ms-animation: toptobottom 300ms ease;
-webkit-animation: toptobottom 300ms ease;
}
.box p,
.box h2{
padding: 0 10px;
position: absolute;
top: 200px;
}
.box:hover p{
animation: bottomtotop 300ms ease;
-o-animation: bottomtotop 300ms ease;
-ms-animation: bottomtotop 300ms ease;
-moz-animation: bottomtotop 300ms ease;
-webkit-animation: bottomtotop 300ms ease;
}
.box:hover{
background: #6CC4AC;
cursor: pointer;
}

@keyframes smalltobig{
from{
opacity: 0;
transform: scale(0.1);
}
to{
opacity: 1;
transform: scale(1);
}
}
@keyframes toptobottom{
from{
opacity: 0;
transform: translateY(-200%);
}
to{
opacity: 1;
transform: translateY(0%);
}
}
@keyframes bottomtotop{
from{
opacity: 0;
transform: translateY(200%);
}
to{
opacity: 1;
transform: translateY(0%);
}
}

 

JavaScript Part:

$(document).ready(function(){
var $boxs = $('#box-container .box'),
$cW = $('#box-container').innerWidth(),
$box = $('.box'),
$boxW = $cW / $boxs.length,
$Modernizr = window.Modernizr;

for(var i=0;i<$boxs.length;i++){
$box.eq(i).css({'left': ($boxW * i)+'px', 'width': $boxW+'px'});
}

if( !Modernizr.csstransitions ){
$('.box').css({'border':'1px solid #333'});
$boxs.each(function(){
var $that = $(this);
$that.hover(
function(){
$('.msg').html('<h2>Your Browser not support!</h2>');
}
);
});
}
});