CSS3 Transitions – What Can Be Transitioned?

0 Flares 0 Flares ×

Almost any CSS property that has a color, length or position component, including many of the new CSS3 properties, can be given a transition. One notable exception seems to be box-shadow.
Straight from the W3C’s Transitions spec, here is a list of CSS properties that can be given a transition, along with the aspects that are transformed. I’ve highlighted a few of the more useful properties.

CSS Property What Changes
background-color Color
background-image Only gradients
background-position Percentage, length
border-bottom-color Color
border-bottom-width Length
border-color Color
border-left-color Color
border-left-width Length
border-right-color Color
border-right-width Length
border-spacing Length
border-top-color Color
border-top-width Length
border-width Length
bottom Length, percentage
color Color
crop Rectangle
font-size Length, percentage
font-weight Number
grid-* Various
height Length, percentage
left Length, percentage
letter-spacing Length
line-height Number, length, percentage
margin-bottom Length
margin-left Length
margin-right Length
margin-top Length
max-height Length, percentage
max-width Length, percentage
min-height Length, percentage
min-width Length, percentage
opacity Number
outline-color Color
outline-offset Integer
outline-width Length
padding-bottom Length
padding-left Length
padding-right Length
padding-top Length
right Length, percentage
text-indent Length, percentage
text-shadow Shadow
top Length, percentage
vertical-align Keywords, length, percentage
visibility Visibility
width Length, percentage
word-spacing Length, percentage
z-index Integer
zoom Number

*Credit: http://www.webdesignerdepot.com/2010/01/css-transitions-101/

Using Multiple CSS Transitions

There are many creative and fun ways to use multiple CSS transitions such as setting transitions to transition at different time intervals to give it a really cool effect. The following example doesn’t do that but its a good place to start.

#access ul li a {
   margin:0 10px 0 0;
   border-bottom:3px solid #0199c8;
   transition:border-bottom-width .5s, margin-top .5s;
   -moz-transition:border-bottom-width .5s, margin-top .5s;
   -webkit-transition:border-bottom-width .5s, margin-top .5s;
}
#access ul li a:hover {
   border-bottom-width:8px;
   margin:-5px 10px 0 0;
}

This will create both a border-bottom-width and a margin-top transition.

About Frank Apicella

Frank Apicella is the founder of Snippet Central and HtotheML. He helps people make websites. However and whichever way he can accomplish it. With a strong background in Wordpress he can most certainly help you out.

Leave a Reply