CSS3 Animation Using Transitions And 2D-Transforms

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 allow 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 an HTML document by the following code.

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.

<!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>

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 an 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 are used to translate, rotate, scale, and skew elements. Transformation effect changes the 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

Rotate effect

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 a rotate effect on the image so we will add some images in the body part of the HTML document and then we will apply the transformation effect by using the 2D transformation rotate() method.

Now first we will create an HTML document by the 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 the image, for this we will use rotate() method with 0 degrees and transition property with duration 1 second. then on the mouse over we will rotate 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 rotate clockwise 360 degrees and when the cursor mouses out of the image, it will change back to its original style at 0 degrees.

Output

The scale() Method

Scale effect

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 documents are like example-1,and then we will apply scale effect by using 2D transformation scale() method.

Now first we will create an HTML document by the 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: 0.40s;    
        -moz-transition: 0.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

Skew effect

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 the 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 an HTML document by the 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 a second. 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: 0.50s;    
        -moz-transition: 0.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

Translate effect

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 a translate effect on the image so we will add some images in the body part of the HTML document the same as example-1,2,3.and then we will apply to translate effect by using 2D transformation translate() method.

Now first we will create an HTML document by the 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 the following code: First, we will add style for default view of the image, for this we will use transition property with duration half second. Now on the mouse over we will move 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 move 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.