transition all css code example

Example 1: css transition all

-webkit-transition: all .3s ease-in-out;
-moz-transition:    all .3s ease-in-out;
-o-transition:      all .3s ease-in-out;
-ms-transition:     all .3s ease-in-out;
transition:         all .3s ease-in-out;

Example 2: scss transition

div {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}
div:hover {
  background: green;
  padding: 20px;
}

Example 3: css background color transition

/* Answer to: "css background color transition" */

/*
  Transitions currently work in Safari, Chrome, Firefox, Opera and
  Internet Explorer 10+.

  The following should produce a fade effect for you on the browsers
  mentioned above:
*/

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

Example 4: css transition on hover

/* Simple CSS color transition effect on selector */

div {
	color: white;
  	background-color: black; 
}

div:hover {
	background-color: red;
}


/* Additional transition effects on selector */

div {
	background-color: black;
  	color: white;
  	height: 100px;
  	transition: width 1.5s, height 3s;
  	width: 100px;
  	
}

div:hover {
	background-color: red;
  	height: 300px;	
  	width: 150px;
}

Example 5: css transition

transition: property duration timing-function delay|initial|inherit;