css transition code example

Example 1: 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 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: css transform transition

.selector {
  transition: transform 1s;
}

Example 4: opacity transition in css

/*
Opacity transition in CSS

By using this we can add element transition with some delay.
And due to transition delay its look like animation of element.
*/

div {
  transition: opacity 0.5s; /* Transition should take 0.3s */
  -webkit-transition: opacity 0.5s; /* Transition should take 0.3s */
  opacity: 1; /* Set opacity to 1 */
}

/*
I hope it will help you.
Namaste
*/

Example 5: css transition

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

Example 6: css transition

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