Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with Transition, Transform and Animations with CSS3

In this article we will discuss about the CSS Transition, Transforms and Animations, and also see some examples of these properties.

Using CSS 3.0 transitions we can add effects when elements switch between styles. We need not use JavaScript or Flash animations this. To do this we need to add 2 things:

  • We need to specify the CSS property for which effect need to be added.
  • We need to specify the duration of the effect.

Syntax: transition: property duration

CSS 3.0 Transition

Listing 1: Example of transition property

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
	width:200px;
	height:200px;
	background:cyan;
	transition:width 5s;
	-webkit-transition:width 5s; /*Safari and Chrome*/
	-o-transition:width 5s; /*Opera*/
}
div:hover
{
	width:400px;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Output:

Example for transition

Figure 1: Example for transition

The effect on Figure 1a after Hovering

Figure 2: The effect on Figure 1a after Hovering

Note:

  • IE does not support this property.
  • For Chrome and safari we need to use prefix -webkit-
  • For Opera we need to use prefix -o-.
  • To add a transitional effect to more than one style , add more properties separated by comma.

CSS 3.0 Transforms

We can stretch, spin, scale, move and turn elements. Elements can be transformed using 2D and 3D transformation.

Note:

  • IE does not support this property.
  • For Firefox we need to use prefix -moz-
  • For Chrome and safari we need to use prefix -webkit-
  • For Opera we need to use prefix -o-.

Different methods used in 2D transform are:

Translate()

Using translate method we can move the elements from its position by giving different parameters to left(X-axis) and the top(Y-axis) position.

The value translate(60px,40px) moves the element 60 pixels from the left and 40 from the top.

Listing 2: Example of Translate property

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
	width:150px;
	height:80px;
	background-color:cyan;
	border:2px solid black;
}
div#divID
{
	transform:translate(60px,110px);
	-moz-transform:translate(60px,110px); /* Firefox */
	-webkit-transform:translate(60px,110px); /* Safari and Chrome */
	-o-transform:translate(60px,110px); /* Opera */
}
</style>
</head>
<body>

<div> This is a div element</div>
<div id="divID"> This is a div element with tranlsate method applied</div>

</body>
</html>

Output:

Example for translate

Figure 3: Example for translate

Scale():

It allows the element to increase or decrease the size , depends on what parameter you give to width(X-axis) and height(Y-axis).

The value(4,6) scales the width to be 4 times its original size and the height to be 6 times its original size.

Listing 3: Example of Scale Property

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
	width:40px;
	height:60px;
	background-color:cyan;
	border:1px solid black;
}
div#divID
{
	margin:105px;
	transform:scale(2,4);
	-moz-transform:scale(2,4); /* Firefox */
	-webkit-transform:scale(2,4); /* Safari and Chrome */
	-o-transform:scale(2,4); /* Opera */
}
</style>
</head>
<body>

<div> This is a div element</div>
<div id="divID"> This is a div element with scale method applied</div>

</body>
</html>

Output:

Example for scale

Figure 4: Example for scale

Rotate():

Element rotates clockwise and if negative values are given then elements rotates in counter clockwise.

The Value rotate(45deg) rotates the element 45 degrees clockwise.

Listing 4: Example of rotate property

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
	width:200px;
	height:150px;
	background-color:cyan;
	border:5px solid black;
}
div#divID
{
	transform:rotate(45deg);
	-moz-transform:rotate(45deg); /* Firefox */
	-webkit-transform:rotate(45deg); /* Safari and Chrome */
	-o-transform:rotate(45deg); /* Opera */
}

</style>
</head>
<body>

<div> This is a div element</div>
<div id="divID"> This is a div element with rotate method applied</div>

</body>
</html>

Output:

Example for rotate

Figure 5: Example for rotate

Skew():

Using skew method we can turn the element to a given angle, depends on what parameter you give to horizontal(X-axis) and vertical (Y-axis) lines.

The value skew(60drg,40deg) turns the element 60 degrees around the X-axis and 40 degrees around the Y-axis.

Listing 5: Example of Skew property

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
	width:105px;
	height:80px;
	background-color:cyan;
	border:2px solid black;
}
div#divID
{
	transform:skew(20deg,30deg);
	-moz-transform:skew(20deg,30deg); /* Firefox */
	-webkit-transform:skew(20deg,30deg); /* Safari and Chrome */
	-o-transform:skew(20deg,30deg); /* Opera */
} 

</style>
</head>
<body>

<div> This is a div element</div>
<div id="divID"> This is a div element with Skew method applied</div>

</body>
</html>

Output:

Example for skew

Figure 6: Example for skew

CSS 3.0 Animations

Using CSS 3.0 we can add animation (an effect that lets an element gradually change from one style to another) effect to our page. We need to create @keyframes rule as shown in the xample below:

Listing 6: Example of Animations property

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:300px;
background:green;
animation:firstanimation 2s;
-webkit-animation:firstanimation 2s; /* Safari and Chrome */
}

@keyframes firstanimation
{
from {background:green;}
to {background:grey;}
}

@-webkit-keyframes firstanimation /* Safari and Chrome */
{
from {background:green;}
to {background:grey;}
}

</style>
</head>
<body>

<div> This is a div element with animation effect</div>

</body>
</html>

As you can see in the above code :

  • We have defined @keyframes rule and named it as firstanimation.
  • We have specified the duration of the animation to as 2s.

Copy paste this code and save it as example.html and open in your browser and you would see how the color changes from green to grey and back to green.

Conclusion

In this part we saw some nice effects of transition, transforms and animations using the CSS 3.0. Hope you enjoyed the articles.



I''m a full stack developer with around 10+ yrs of experience. I enjoy writing technical articles on upcoming technical trends.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login