transition-property for cross-browser compatibility - html

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.