css transition examples

Example 1: transition transform

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

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

Example 2: css transform transition

.selector {
  transition: transform 1s;
}

Example 3: 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

Example 4: transition syntax css

transition: property duration transition-timing-function delay; 
/*Shorthand Property*/

Example 5: css transition

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

Example 6: css opacity transition

div {
  transition: opacity seconds;
}

Tags:

Html Example