Vendor Prefixes
Vendor prefixes are a way for browsers to support features before they are finalized because of the implementation differences between browsers. Hopefully will not be needed in the future. Currently, most recent versions of Firefox, Opera, and IE support CSS animations without prefixes. They should be written with the non-prefixed vendor prefix placed last so that their FINAL implementation will override any current browser implementation due to the cascading rule of CSS that will interpret the last know rule that have the same set of properties. Common vendor prefixes include:
- -webkit- prefix version for WebKit browsers
- -moz- prefix for Mozilla
- -o- for Opera
- -ms- for Microsoft
- unprefixed property (no -xxxxx-)
To help with creating all of the various types of vendor prefixes you can use CSS tools like AutoPrefixer or CSS3Generator or if you are a little more advanced you can use CSS preprocessor like LESS and SASS which can automatically add vendor prefixes.
Both animation property and @keyframes rules all need to be prefixed. Unprefixed rules should always come last to make code future-proof.