how to use transition css code example

Example 1: 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 2: Using CSS transitions

div {
    transition: <property> <duration> <timing-function> <delay>;
}

Example 3: css transition

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

Example 4: css opacity transition

div {
  transition: opacity seconds;
}