transition 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: 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 3: transition transform

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

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

Example 4: css transform transition

.selector {
  transition: transform 1s;
}

Example 5: css transition

/*CSS Transition Syntax*/
selector {
 transition: property duration timing-function delay|initial|inherit; 
}

Example 6: learn css animations transform

Read this comprehensive article about CSS animation transform property. 
It also has many useful examples that help you in best way.

https://medium.com/swlh/learn-css-transform-animation-zero-to-hero-6a2a643bd56b