How to Animate Using CSS Transforms

From the previous posts about to transform elements and creating animations using CSS, you have learned the uses of transform property and different transformation functions used in transformation property and creating animations for any HTML elements using CSS animation property. In this post with combining both of the above concepts I am describing on how to animate elements using CSS transforms. Along with transforming elements, you can animate your transform using animation property in CSS with creating animations on elements on any action like mouse over, click etc. or with animating automatically on loading your web page.

How To Animate Using CSS Resize


You can animate HTML elements using scale function in transform property of CSS. Here an example that animate with re-sizing on mouse over and animate automatically in infinite iteration.

CSS Code:

h4{color:blue;}
.box{width:100px; height:70px; background:#aaffaa; border-radius:10px;text-align:center;position:relative;}
#box1:hover{-webkit-transform:scale(1.5,1.5);-moz-transform:scale(1.5,1.5);
-ms-transform:scale(1.5,1.5);transform:scale(1.5,1.5);background:#ffaa00;border-radius:10px;}

@-webkit-keyframes box2{
  from {-webkit-transform:scale(1,1);}
  50%  {-webkit-transform:scale(1.5,1.5);
     background:#ffaa00;}   
    to {-webkit-transform:scale(1,1);}
  }
  @keyframes box2{
  from {-moz-transform:scale(1,1);
        -ms-transform:scale(1,1);
        transform:scale(1,1);}
  50%  {-moz-transform:scale(1.5,1.5);background:#ffaa00;
    -ms-transform:scale(1.5,1.5);background:#ffaa00;
    transform:scale(1.5,1.5);background:#ffaa00;}
    to {-moz-transform:scale(1,1);
        -ms-transform:scale(1,1);
        transform:scale(1,1);}
  }
#box2{
  -webkit-animation-name:box2;
  -webkit-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-duration:6s;
 
  animation-name:box2;
  timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:6s;
}

HTML Code:

<div align="center" width="100%">
<h4>This Box is Animated With Scalling on Mouseover</h4>
<div class="box" id="box1">First Box</div><br/>
<h4>This Box is Animated With Scalling Automatically </h4>
<div class="box" id="box2">Second Box</div></div>

Preview:


This Box is Animated With Scalling on Mouseover
First Box

This Box is Animated With Scalling Automatically
Second Box


How To Animate Using CSS Skew


You can animate HTML elements using skew function in transform property of CSS. Here an example that animate with skewing on mouse over and animate automatically in infinite iteration.

CSS Code:

#box3:hover{-moz-transform:skew(120deg, 45deg);-webkit-transform:skew(120deg, 45deg);-ms-transform:skew(120deg, 45deg);background:#ffaa00;border-radius:10px;}

@-webkit-keyframes box4{
  from {-webkit-transform:scale(0,0);}
  50%  {-webkit-transform:skew(120deg,45deg);
     background:#ffaa00;}   
    to {-webkit-transform:skew(0,0);}
  }
  @keyframes box4{
  50%  {-moz-transform:skew(120deg, 45deg);background:#ffaa00;
    -ms-transform:skew(120deg, 45deg);background:#ffaa00;
    transform:skew(120deg, 45deg);background:#ffaa00;}
  }
#box4{
  -webkit-animation-name:box4;
  -webkit-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-duration:6s;
 
  animation-name:box4;
  timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:6s;
}

HTML Code:

<div align="center" width="100%">
<h4>This Box is Animated With Skewing on Mouseover</h4>
<div class="box" id="box3">Third Box</div><br/>
<h4>This Box is Animated With Skewing Automatically</h4>
<div class="box" id="box4">Fourth Box</div></div>

Preview:


This Box is Animated With Skewing on Mouseover
Third Box

This Box is Animated With Skewing Automatically
Fourth Box

How To Animate Using CSS Rotate


You can animate HTML elements using rotate function in transform property of CSS. Here an example that animate with rotating on mouse over and animate automatically in infinite iteration.

CSS Code:

#box5:hover{-moz-transform:rotate(250deg);-webkit-transform:rotate(250deg);-ms-transform:rotate(250deg);background:#ffaa00;border-radius:10px;}

@-webkit-keyframes box6{
  from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}
  @keyframes box6{
  from {-moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);}
    50% {-moz-transform:rotate(180deg);background:#ffaa00;
        -ms-transform:rotate(180deg);background:#ffaa00;
        transform:rotate(180deg);background:#ffaa00;}
    to {-moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        transform:rotate(360deg);}
  }

#box6{
  -webkit-animation-name:box6;
  -webkit-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-duration:6s;
 
  animation-name:box6;
  timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:6s;
  }

HTML Code:

<div align="center" width="100%">
<h4>This Box is Animated With Rotating on Mouseover</h4>
<div class="box" id="box5">Fifth Box</div><br/>
<h4>This Box is Animated With Rotating Automatically</h4>
<div class="box" id="box6">Sixth Box</div></div>

Preview:


This Box is Animated With Rotating on Mouse-over
Fifth Box

This Box is Animated With Rotating Automatically
Sixth Box

How To Animate Using CSS Translate


You can animate HTML elements using translate function in transform property of CSS. Here an example that animate with translating on mouse over and animate automatically in infinite iteration.

CSS Code:

#box7:hover{-moz-transform:translate(3em);-webkit-transform:translate(3em);-ms-transform:translate(3em);background:#ffaa00;}

@-webkit-keyframes box8{
  from {-webkit-transform:translate(0);}
  50%  {-webkit-transform:translate(3em);}
  to   {-webkit-transform:rotate(-3em);}
}
  @keyframes box8{
  from {-moz-transform:translate(0);
        -ms-transform:translate(0);
        transform:translate(0);}
    50% {-moz-transform:translate(3em);
        -ms-transform:translate(3em);
        transform:translate(3em);
    background:#ffaa00;}
    to {-moz-transform:translate(0);
        -ms-transform:translate(0);
        transform:translate(0)}
  }

#box8{
  -webkit-animation-name:box8;
  -webkit-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-duration:6s;
 
  animation-name:box8;
  timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:6s;
  }

HTML Code:

<div align="center" width="100%">
<h4>This Box is Animated With Translating on Mouse-over</h4>
<div class="box" id="box7">Seventh Box</div><br/>
<h4>This Box is Animated With Translating Automatically</h4>
<div class="box" id="box8">Eighth Box</div></div>

Preview:


This Box is Animated With Translating on Mouse-over
Seventh Box

This Box is Animated With Translating Automatically
Eighth Box