A very simple quick tip today, how to create transitions that execute when your responsive website is resized!

This couldn’t be any simpler, any objects you want to create transitions for when they change width/height simply add the following to the element in CSS:

/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;
 
/* firefox 4+ */
-moz-animation-property: -webkit-width;
-moz-animation-property: -webkit-height;
-moz-transition-duration: 1s; 
 
/* Opera */
-o-animation-property: -webkit-width;
-o-animation-property: -webkit-height;
-o-transition-duration: 1s;

As it says on the tin, animation property is the property you wish to animate in this case, we only want to animate when the height/width of the element. Duration is how long you want the transition to take.

As you will see when you resize my website, the main container element #page transitions between states using the same code as above!