How To Create 15 Different CSS3 Transition Effects

by Paul Underwood

Last updated on July 12th, 2017

In this tutorial we are going to look at 15 different effects you can create using CSS transitions.

CSS3 allows you to add transitions to different CSS properties on any HTML element. Using CSS transition effects allows you to add different types of animation to your web pages.

If you look at the social media icons on (my site) you will see how it uses CSS transitions to change the opacity on the images to fade in the social media icons.

CSS Transition Property

Currently transitions are supported on all modern browsers and will come into place for Internet Explorer in IE 10.

To use transition you need to add the browser prefix to the start of the property.

 div{ transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } 

With transitions you can change a certain CSS property or all the properties on an element.

In the below examples of transitions we are setting it to all so we can make multiple changes to the element.

View the demo to see these in action.

The Box

All of the following examples use the same HTML element, a box, so we can demo the different CSS transition effects, here is where we setup the transition settings.

fade out

 <div class="box"> </div> 
	margin:10px auto;
	transition: all 0.7s linear;
	-webkit-transition: all 0.7s linear;
	-moz-transition: all 0.7s linear;
	-o-transition: all 0.7s linear;
	-ms-transition: all 0.7s linear;

Now we have add the transition property to the box class we just have to setup the hover events on the boxes to see the transition effect.

Move Down

Move the box down.

 <div class="box move_down"> </div> 
 .move_down:hover{ top:30px; } 

Move Up

Move the box up.

 <div class="box move_up"> </div> 
 .move_up:hover{ top:-30px; } 

Move Left

Move the box to the left.

 <div class="box move_left"> </div> 
 .move_left:hover{ left:-30px; } 

Move Right

Move the box to the right.

 <div class="box move_right"> </div> 
 .move_right:hover{ left:30px; } 


Change the scale to make the box smaller.


 <div class="box smaller"> </div> 
 .smaller:hover{ -webkit-transform: scale(0.7); } 


Change the scale to make the box larger.


 <div class="box larger"> </div> 
 .larger:hover{ -webkit-transform: scale(1.3); } 


Change the angle of the box.


 <div class="box tilt"> </div> 
 .tilt:hover{ -webkit-transform: rotate(20deg); } 


Completely rotate the box.


 <div class="box rotate"> </div> 
 .rotate:hover{ -webkit-transform: rotate(360deg); } 

Adding Shadows

Add box shadow to the box.


 <div class="box shadows"> </div> 
 .shadows:hover{ box-shadow: 0 3px 25px #000; } 

Changing Background Colour

Change the background colour of the box.

background colour

 <div class="box bg_colour"> </div> 
 .bg_colour:hover{ background-color:#000; } 

Changing Width

Change the width of the box.

changing width srcset=

 <div class="box width_more"> </div> 
 .width_more:hover{ width:800px; } 

Changing Height

Change the height of the box.

changing height

 <div class="box height_more"> </div> 
 .height_more:hover{ height:600px; } 

Fade In

Fade the box into sight on hover.

fade out

 <div class="box fade_in"> </div> 
 .fade_in { opacity:0.3; } .fade_in:hover{ opacity:1; } 

Fade Out

Fade the box out of sight on hover.

fade in

 <div class="box fade_out"> </div> 
 .fade_out:hover{ opacity:0.3; } 

Border Radius

Change the border radius of the box.

border radius

 <div class="box border_radius"> </div> 
 .border_radius:hover{ border-radius:50%; } 

View the demo to see these in action.



Get updates on new articles, webinars and other opportunities:

Paul Underwood

Paul Underwood is a Web Developer who writes Web Development tutorials and snippets about Wordpress, PHP, jQuery and CSS3. To view more tutorials visit his blog Paulund.


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Michael says:
    February 18, 2016 at 5:29 am

    cool stuff, thanks For Sharing with us its very nice

  2. Tim says:
    January 28, 2016 at 11:54 am

    Your demo link doesn’t work. 404.

  3. Suyog Patil says:
    November 14, 2015 at 12:16 pm

    Demo link broken ‘

  4. Paul says:
    May 27, 2014 at 2:55 pm

    This is an old post. Who ever has access to the demo pages they should be able to simply remove the prefixes from the CSS properties and it should work.

    • neil says:
      May 28, 2014 at 10:28 am

      Paul, thanks for the heads up 🙂

  5. ybenam says:
    May 23, 2014 at 8:16 am

    Thank you for this samples.
    i tested on chrome: all is ok
    on firefox29.0.1 and ie11 these samples dont work:
    .smaller class
    .larger class
    .tilt class
    .rotate class

    • Kathryn Aragon says:
      May 23, 2014 at 11:36 am

      Thanks for the input, Ybenam.

    • neil says:
      May 24, 2014 at 9:10 am

      Ybenam, thanks for sharing 🙂

  6. sh says:
    May 26, 2013 at 12:54 am


  7. Chris says:
    February 17, 2013 at 11:15 pm

    Demo link seems broken.

  8. shruti says:
    October 17, 2012 at 4:32 am

    nice collection and tutorial

  9. Casey Dennison says:
    October 10, 2012 at 1:45 pm

    This is a great tutorial. Pretty nifty effects here that can be applied to pretty much any elemet.

Show Me My Heatmap

We've been demo-ing @CrazyEgg this week. Quite impressed so far.

Sara MacQueen


What makes people leave your website?