hover transform animation css code example

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

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

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

Example 3: css transform transition

.selector {
  transition: transform 1s;
}