Web Designing Tutorials

How to Animate Using CSS Transforms

Pinterest LinkedIn Tumblr
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:

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

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

This Box is Animated With Translating Automatically
Eighth Box
Author

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 8 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Comments are closed.