CSS3 Animation Using Transitions And 2D-Transforms

Shaili Dashora
8y
6.2k
0
4

Article

Introduction

In this article we will create some interesting animation effects using CSS3 Transitions property and CSS3 Transforms methods. Now before going to create some examples of animation we need to understand CSS3 Transitions:

CSS3 Transitions

CSS3 transitions allows us to change property values smoothly, over a given duration.

To create a transition effect,we specify two things:

The CSS property for effect
The duration of the effect

Example

In this example we will add five images at body of the document, each image two times, the first image for default view of image and second image for which we will apply image zooming effect using transition.

Now first we will create a html document by following code.

<!DOCTYPE html>
<html>
<head>
<title>Image Zoom Effect</title>
</head>
<body>
<img class="image" src="smile.jpeg">
<img class="imagezoom" src="smile.jpeg">
<img class="image" src="corner.png">
<img class="imagezoom" src="corner.png">
<img class="image" src="holi.jpg">
<img class="imagezoom" src="holi.jpg">
<img class="image" src="NewYear.jpg">
<img class="imagezoom" src="NewYear.jpg">
<img class="image" src="Day.jpg">
<img class="imagezoom" src="Day.jpg">
</body>
</html>

Now we will add styles for class "image" and class "imagezoom" by writing following code at the <head></head> tag of the document in <style></style> tag.

First we will add style for default view of image, and then we want to add zoom effect for the image so we will specify a transition effect for the width property,with duration of effect.

<style>
.image{
width:60px;
height:60px;
}
.imagezoom{
position: absolute;
width:0px;
-webkit-transition:width 0.4s 0s;
-moz-transition:width 0.4s 0s;
transition:width 0.4s 0s;
z-index:10;
}
</style>

Now when a user mouses over the image we want to add image zoom effect that is specified for class "imagezoom" so we will add some more style in above <style></style> tag.

.image:hover + .imagezoom{
width:270px;
height:250px;
}

Let's see output -- when a user mouses over the image, it will perform Zooming Effect of Transition like this.

Output

Now before going to create some more examples we need to understand about CSS3 Transforms.

CSS3 Transforms

CSS3 Transforms is used to translate, rotate, scale, and skew elements.Transformation effect change shape, size and position of an element.

CSS3 2D Transforms

In this article we will understand about the 2D transformation methods:

rotate()
scale()
skew()
translate()

The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise (using negative values) according to a given degree.

Example 1:

In this example we will see rotate effect on the image so we will add some images in the body part of html document and then we will apply transformation effect by using 2D transformation rotate() method.

Now first we will create a html document by following code.

<!DOCTYPE html>
<html>
<head>
<title>Image Rotate Effect</title>
</head>
<body>
<img class="image" src="smile.jpeg">
<img class="image" src="corner.png">
<img class="image" src="holi.jpg">
<img class="image" src="NewYear.jpg">
<img class="image" src="Day.jpg">
</body>
</html>

Now we will add styles for class "image" by writing following code at the <head></head> tag of the document in <style></style> tag.

First we will add style for default view of image,for this we will use rotate() method with 0 degree and transition property with duration 1 second. then on the mouse over we will rotates the image clockwise with 360 degrees.

<style>
img, body{
margin:0px;
padding:5px;
}
.image{
width:100px;
height:100px;
left: 0px;
-webkit-transform:rotate(0deg);
-webkit-transition: 1s;
-moz-transform:rotate(0deg);
-moz-transition: 1s;
}
.image:hover{
-webkit-transform:rotate(360deg);
-webkit-transition: 1s;
-moz-transform:rotate(360deg);
-moz-transition: 1s;
}
</style>

Let's see output -- when a user mouses over the image, it will rotates clockwise 360 degrees and when the cursor mouses out of the image, it will change back to its original style at 0 degree.

Output

The scale() Method

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

Example 2:

In this example we will see scale effect on the image so we will add some images in the body part of html documentsame like example-1,and then we will apply scale effect by using 2D transformation scale() method.

Now first we will create a html document by following code.

<!DOCTYPE html>
<html>
<head>
<title>Image Scale Effect</title>
</head>
<body>
<img class="image" src="smile.jpeg">
<img class="image" src="corner.png">
<img class="image" src="holi.jpg">
<img class="image" src="NewYear.jpg">
<img class="image" src="Day.jpg">
</body>
</html>

Now we will add styles for class "image" by writing following code,First we will add style for default view of image,for this we will use transition property with duration 1second.Now on the mouse over we will increase the image with scale 1.25 with the duration (.40) second.

<style>
img, body{
margin:0px;
padding:6px;
}
.image{
width:100px;
height:100px;
-webkit-transition: 1s;
-moz-transition: 1s;
}
.image:hover{
-webkit-transition:.40s ;
-moz-transition: .40s ;
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
}
</style>

Let's see the output -- when a user mouses over the image, it will increase by 1.25 scale and when the cursor mouses out of the image it will change back to its original style of image.

Output

The skew() Method

The skew() method skews an element along the X and Y-axis by the given angles.

Example 3:

In this example we will see skew effect on the image so we will add some images in the body part of html document same like example-1,2.and then we will apply skew effect by using 2D transformation skew() method.

Now first we will create a html document by following code.

<!DOCTYPE html>
<html>
<head>
<title>Image Skew Effect</title>
</head>
<body>
<img class="image" src="smile.jpeg">
<img class="image" src="corner.png">
<img class="image" src="holi.jpg">
<img class="image" src="NewYear.jpg">
<img class="image" src="Day.jpg">
</body>
</html>

Now we will add styles for class "image" by writing following code: First we will add style for default view of image, for this we will use transition property with duration half seccond.Now on the mouse over we will skews the image 20 degrees along the X-axis, and 10 degrees along the Y-axis.

<style>
img, body{
margin:0px;
padding:6px;
}
.image{
width:100px;
height:100px;
-webkit-transition: .50s;
-moz-transition: .50s;
}
.image:hover{
transform: skew(20deg,10deg);
-webkit-transform: skew(20deg,10deg);
-moz-transform: skew(20deg,10deg);
}
</style>

Let's see the output -- when a user mouses over the image, it will skew 20 degrees along the X-axis, and 10 degrees along the Y-axis, and when the cursor mouses out of the image, it will change back to its original style of image.

Output

The translate() Method

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

Example 4

In this example we will see translate effect on the image so we will add some images in the body part of html document same like

example-1,2,3.and then we will apply translate effect by using 2D transformation translate() method.

Now first we will create a html document by following code.

<!DOCTYPE html>
<html>
<head>
<title>Image Translate Effect</title>
</head>
<body>
<img class="image" src="smile.jpeg">
<img class="image" src="corner.png">
<img class="image" src="holi.jpg">
<img class="image" src="NewYear.jpg" >
<img class="image" src="Day.jpg">
</body>
</html>

Now we will add styles for class "image" by writing following code: First we will add style for default view of image,for this we will use transition property with duration half seccond.Now on the mouse over we will moves the image 55 pixels to the right, and 110 pixels down from its current position.

<style>
img, body{
margin:0px;
padding:6px;
}
.image{
width:100px;
height:100px;
-webkit-transition: .50s;
-moz-transition: .50s;
}
.image:hover{
transform: translate(55px,110px);
-webkit-transform: translate(55px,110px);
-moz-transform: translate(55px,110px);
}
</style>

Let's see the output -- when a user mouses over the image, it will moves 55 pixels to the right, and 110 pixels down from its current position, and when the cursor mouses out of the image, it will change back to its original style of image.

Output:

Conclusion

In this article we have done CSS3 Transition Effect and CSS3 2D Transforms methods (rotate(), scale(), skew(), translate()) with interesting animation examples.