Transitions

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

you can control the individual components of the transition with the following sub-properties:

  • Transition: A shorthand property for setting the four transition properties into a single property.
div {
  /* transition: <property> <duration> <timing-function> <delay>; */
  background-color: #333;
  transition: all 1s ease-out;
}
  • transition-property: Specifies the name of the CSS property the transition effect is for.
div {
   transition-property: opacity, left; 
}
  • transition-duration: Specifies how many seconds or milliseconds a transition effect takes to complete.
div { 
   /* <time> values*/
   transition-duration: 4s;
   /* <time: Right,Left,Top, bottom> */
   transition-duration: 3s, 5s, 2s, 1s;
}
  • transition-delay: Specifies a delay (in seconds) for the transition effect.
div {
   transition-delay: 0.25s; 
}
  • transition-timing-function: Specifies the speed curve of the transition effect.
div {
   transition-timing-function: linear;
}