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.

Table of Contents

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:

h5{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;
}

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:

#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;
}

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:

#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;
}

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:

#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;
}