TRANSITION code example

Example 1: scss transition

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

Example 2: 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 3: css transition opacity

/* Answer to: "css transition opacity" */

/*
  CSS transitions allows you to change property values smoothly,
  over a given duration.
*/

.myClass {
  vertical-align: top;
  transition: opacity 0.3s; /* Transition should take 0.3s */
  -webkit-transition: opacity 0.3s; /* Transition should take 0.3s */
  opacity: 1; /* Set opacity to 1 */
}

.myClass:hover {
  opacity: 0.5; /* On hover, set opacity to 2 */
}

/* 
  From `opacity: 1;` to `opacity: 0.5;`, the transition time should
  take 0.3 seconds as soon as the client starts to hover over the
  element.
*/

Example 4: css transition

<style>
div {
  background-color: blue;
  padding: 40px;
  color: white;
  cursor: pointer;
  -webkit-transition: all 0.5s 0s ease;
  -moz-transition: all 0.5s 0s ease;
  -o-transition: all 0.5s 0s ease;
  transition: all 0.5s 0s ease;
}
/*transition: property duration timing-function delay|initial|inherit;*/

.hidden {
  visibility: visible;
  opacity: 0.1;
  max-width: 12%;
}

.hidden:hover {
  visibility: visible;
  opacity: 1;
	max-width: 100%;
}
</style>

<div class="hidden">HOVER ME!</div>

Example 5: display transition css

div {
  background-color: blue;
  padding: 40px;
  color: white;
  cursor: pointer;
  transition: all .1s ease;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  max-height: 0%;
}

.hidden:hover {
  visibility: visible;
  opacity: 1;
  max-height: 1000px;
}
<div class="hidden"></div>

Example 6: transition transform

/* Transition Transform */
.section:hover {
  transform: translateX(0px) translateY(75px);
}

.section {
  transition: transform 500ms ease-in-out 25ms;
}