transition-property for cross-browser compatibility

Question

I have the following code of CSS3 for regular browsers and those with -webkit- suport.

But, what value should I really set for the following property:

-webkit-transition-property: ????;

Because a value like box-shadow is -webkit-box-shadow for -webkit- related usages, and then, for the above property , should I use box-shadow or -webkit-box-shadow ?

Answer 1

If you want to have a transition of a property which also uses vendor prefixes itself, you need to add them.

Example CSS:

.my-class {
    -webkit-transition: -webkit-box-shadow 1s;
       -moz-transition:    -moz-box-shadow 1s;
        -ms-transition:     -ms-box-shadow 1s;
         -o-transition:      -o-box-shadow 1s;
            transition:         box-shadow 1s;
}

With unprefixed properties it works like this:

.other-class {
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
        -ms-transition: color 1s;
         -o-transition: color 1s;
            transition: color 1s;
}

Browser support:

• CSS3 transition
• CSS3 box-shadow

Answer 2

You should use the corresponding vendor-prefixed property.

-webkit-transition-property: -webkit-box-shadow;
-moz-transition-property: -moz-box-shadow; /*For older versions of Firefox only*/
transition-property: box-shadow;

Answer 3

Check this example:

div {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;

    /* Safari */
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 2s;
}

is the same as (using shorthand version):

div {
            transition: width 1s linear 2s;
    -webkit-transition: width 1s linear 2s; /* Safari */
}

Here http://caniuse.com/#feat=css-transitions you can find when you need prefixes for transitions. There is a nice example here http://jsfiddle.net/davidThomas/XEWhk/1/ from another similar question that helps a lot.