CSS Vendor Prefixes

Format:-

'-' + vendor identifier + '-' + meaningful name
'_' + vendor identifier + '-' + meaningful name

CSS3 Vendor Prefixes

Prefix	Browser(s)
-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge
-khtml-	Konqueror

Examples:-

.example {
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #fff));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #000 0%, #fff 100%);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #000 0%, #fff 100%);

  /* IE 6 - 9 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );

  /* IE 10+ */
  background: -ms-linear-gradient(top, #000 0%, #fff 100%);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #000 0%, #fff 100%);	
}

Cross Browser CSS Calc()

#bar {
	width: 200px;
	width: -webkit-calc(50% - 100px);
	width: -moz-calc(50% - 100px);
	width: calc(50% - 100px);
}

CSS Transitions prefixes

.example {
    -webkit-transition: width 400ms ease, background 400ms ease;
	transition: width 400ms ease, background 400ms ease;

    -webkit-transition: all 1800ms ease;
    transition: all 1800ms ease;

    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.example {
    -moz-transition: 400ms width ease;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width;
    -webkit-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width;
    -o-transition-timing-function: ease;
    width: 500px;
}

Other:

.example {
  -webkit-animation-name: slidein;
  -o-animation-name: slidein;
  -ms-animation-name: slidein;
  -moz-animation-name: slidein;
  animation-name: slidein;
}

Add Vendor Prefixes Automatically using Autofixer