HTML 5

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 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.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Image Zoom Effect</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <img class="image" src="smile.jpeg">  
  10.     <img class="imagezoom" src="smile.jpeg">  
  11.   
  12.     <img class="image" src="corner.png">  
  13.     <img class="imagezoom" src="corner.png">  
  14.   
  15.     <img class="image" src="holi.jpg">  
  16.     <img class="imagezoom" src="holi.jpg">  
  17.   
  18.     <img class="image" src="NewYear.jpg">  
  19.     <img class="imagezoom" src="NewYear.jpg">  
  20.   
  21.     <img class="image" src="Day.jpg">  
  22.     <img class="imagezoom" src="Day.jpg">  
  23. </body>  
  24.   
  25. </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. 
  1. <style>  
  2. .image{  
  3.     width:60px;  
  4.     height:60px;  
  5. }  
  6. .imagezoom{  
  7.     position: absolute;  
  8.     width:0px;  
  9.     -webkit-transition:width 0.4s  0s;  
  10.     -moz-transition:width 0.4s  0s;  
  11.     transition:width 0.4s 0s;  
  12.     z-index:10;  
  13. }     
  14. </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.

  1. .image:hover + .imagezoom{  
  2.     width:270px;  
  3.     height:250px;  
  4. }  

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.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Image Rotate Effect</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <img class="image" src="smile.jpeg">  
  10.     <img class="image" src="corner.png">  
  11.     <img class="image" src="holi.jpg">  
  12.     <img class="image" src="NewYear.jpg">  
  13.     <img class="image" src="Day.jpg">  
  14. </body>  
  15.   
  16. </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. 
  1. <style>  
  2. img, body{  
  3.     margin:0px;  
  4.     padding:5px;  
  5. }  
  6. .image{  
  7.      width:100px;  
  8.      height:100px;  
  9.     left: 0px;  
  10.    -webkit-transform:rotate(0deg);  
  11.    -webkit-transition: 1s;  
  12.    -moz-transform:rotate(0deg);  
  13.    -moz-transition: 1s;  
  14. }  
  15. .image:hover{  
  16.    -webkit-transform:rotate(360deg);  
  17.     -webkit-transition: 1s;  
  18.    -moz-transform:rotate(360deg);  
  19.     -moz-transition: 1s;  
  20. }  
  21. </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.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Image Scale Effect</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <img class="image" src="smile.jpeg">  
  10.     <img class="image" src="corner.png">  
  11.     <img class="image" src="holi.jpg">  
  12.     <img class="image" src="NewYear.jpg">  
  13.     <img class="image" src="Day.jpg">  
  14. </body>  
  15.   
  16. </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. 

  1. <style>  
  2. img, body{  
  3.     margin:0px;  
  4.     padding:6px;  
  5. }  
  6. .image{  
  7.     width:100px;  
  8.     height:100px;  
  9.                 -webkit-transition: 1s;  
  10.                 -moz-transition: 1s;  
  11. }  
  12. .image:hover{  
  13.     -webkit-transition:.40s ;  
  14.     -moz-transition: .40s ;  
  15.     -webkit-transform: scale(1.25);  
  16.     -moz-transform: scale(1.25);  
  17. }  
  18. </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.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Image Skew Effect</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <img class="image" src="smile.jpeg">  
  10.     <img class="image" src="corner.png">  
  11.     <img class="image" src="holi.jpg">  
  12.     <img class="image" src="NewYear.jpg">  
  13.     <img class="image" src="Day.jpg">  
  14. </body>  
  15.   
  16. </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.

  1. <style>  
  2. img, body{  
  3.     margin:0px;  
  4.     padding:6px;  
  5. }  
  6. .image{  
  7.     width:100px;  
  8.     height:100px;  
  9.                -webkit-transition: .50s;  
  10.               -moz-transition: .50s;  
  11. }  
  12. .image:hover{  
  13.     transform: skew(20deg,10deg);  
  14.                  -webkit-transform: skew(20deg,10deg);  
  15.                 -moz-transform: skew(20deg,10deg);  
  16. }  
  17. </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.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Image Translate Effect</title>  
  5. </head>  
  6. <body>  
  7. <img class="image" src="smile.jpeg">  
  8. <img class="image" src="corner.png">  
  9. <img class="image" src="holi.jpg">  
  10. <img class="image" src="NewYear.jpg" >  
  11. <img class="image" src="Day.jpg">  
  12. </body>  
  13. </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.

  1. <style>  
  2. img, body{  
  3.     margin:0px;  
  4.     padding:6px;  
  5. }  
  6. .image{  
  7.     width:100px;  
  8.     height:100px;  
  9.                 -webkit-transition: .50s;  
  10.                 -moz-transition: .50s;  
  11. }  
  12. .image:hover{  
  13.              transform: translate(55px,110px);  
  14.              -webkit-transform: translate(55px,110px);  
  15.             -moz-transform: translate(55px,110px);  
  16. }  
  17. </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.

Read more articles on CSS:
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs