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
This Box is Animated With Scalling Automatically
How To Animate Using CSS Skew
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
This Box is Animated With Skewing Automatically
How To Animate Using CSS Rotate
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
This Box is Animated With Rotating Automatically
How To Animate Using CSS Translate
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
This Box is Animated With Translating Automatically
Comments are closed.