CSS3 Transitions

Use CSS3 transition property to change CSS values

Creative CSS

Designing with CSS – CSS3 Transitions

For richer user interfaces it is often desirable to include some animation to make an effect more appealing. CSS3 Transitions allows property changes in CSS values to occur in animations over a specified duration.

The transition-property property specifies the name of the CSS property to which the transition is applied.
A value of ‘none’ means that no property will transition. A value of ‘all’ means that every property that is able to undergo a transition will do so. Otherwise, a list of properties to be transitioned is given.

The transition-duration property specifies how long the transition from the old value to the new value should take.
By default the value is ‘0’, meaning that the transition is immediate (there will be no animation).

The transition-timing-function property describes how the intermediate values used during a transition will be calculated.
The timing functions have the following definitions: ease, linear, ease-in, ease-out, and ease-in-out.

The transition-delay property defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied.
A value of ‘0’ means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.

The transition shorthand property combines the four properties described above into a single property.

The order is important in this property. The first value that can be parsed as a time is assigned to the transition-duration. The second value that can be parsed as a time is assigned to transition-delay.

CSS3 Generator

If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.

CSS3 Transition

You choose property – all, width, height, color, background, outline; duration in seconds; and function – linear, ease, ease-in, ease-out, ease-in-out. The code will be generated.

Your Code:

transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
/* Some Defaults for You */
width: 100px;
height: 100px;
color: #00f
background: #f00;
padding: 50px;
outline: 1px dashed #ff00ff;
/* End Defaults */

Your Code for Transition on Hover:

width: 500px;
height: 500px;
color: #ff0;
background: #0f0;
outline: 10px dashed #ff00ff;

If your browser supports CSS3 transition property, I give you below a composite example to demostrate transitions of CSS properties from old values to new values.

Example of CSS3 Transitions

CSS Code:

transition: all 5s 2s ease;
-moz-transition: all 5s 2s ease;
-webkit-transition: all 5s 2s ease;
-o-transition: all 5s 2s ease;
width: 125px;
height: 100px;
color: #fff;
background: red url("http://www.goldenTwine.com/btn/btnHlp.gif") no-repeat top left;
opacity: 1;
padding: 5px;
border: 2px solid silver;
margin: 0 0 5px 5px;
outline: 3px solid gold;

CSS Code for Transition on Hover:

width: 150px;
height: 150px;
color: #000;
background: yellow url("http://www.goldenTwine.com/btn/btnHlp.gif") no-repeat bottom right;
opacity: 0.5;
padding: 10px;
border: 3px dashed silver;
margin: 0 0 15px 15px;
outline: 5px ridge gold;
outline-offset: 5px;


Transitions of five seconds have been defined on all the properties of the inner box.
This will cause a smooth change between the old values and the new values over a period of five seconds after an initial delay of two seconds when the inner box is hovered.

CSS3 Transitions
Hover over this inner box to see CSS transitions in action.
Browser Support
Box outline offset is currently only supported in Firefox 4.0+ Chrome 3.0+ Safari 3.2+ Opera 10.5+
Check it out! Whether it works for you or not, please share with me by writing a comment, and mentioning your browser and version. Your feedback would be immensely helpful.
CSS3 Generator
W3C CSS3 Transitions Module
CSS3 Transitions allows property changes in CSS values to occur smoothly over a specified duration.
CSS3 Transition Property
Web Host for your WordPress Blog
If you are looking for a web host that will provide hosting environment for WordPress, BlueHost is one of the best choices. My website and blog are hosted by BlueHost.
Click Here to Signup for BlueHost
Small Business Website Design
Get a professionally designed special custom five-page website ideal for small business that need an online presence as well as personal sites or informational sites at an amazing price of only $125.
Visit our website to learn more about Small Business Website Design

CSS3 User Interface Box Outline Offset
Use CSS3 outline-offset property to offset the outline rendition
CSS3 2D Transforms
Use CSS3 transform property to apply a two-dimensional transformation
Related Posts with Thumbnails
Admin/Author Admin/Author: Subrato Paul, owner of GoldenTwine Informatics founded in April 2003, lives in Kolkata, India. He is a freelance website designer, Internet marketer, social media enthusiast, and blogger. He writes in his blogs and as a guest writer about marketing and social media, eCommerce, website design and development, and his website.
RSSDid you like this article? If you're new to goldenTwine blog, you may want to
Subscribe to RSS feed: | Comments RSS | Email Subscription
Social Media:
Short Link: https://wp.me/pPMoR-pX | Thanks for visiting!

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Notify me of followup comments via e-mail. You can also subscribe without commenting.

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