22. Transition

To create a transition between 2 states, such as an element at rest whose hover pseudo-class becomes active, we have different configurations available.

Duration

Time the transition will last.

.elemento {
  /* Default */
  transition-duration: 0s;

  /* 2 seconds */
  transition-duration: 2s;
}

More information

Property

Defines which property you want to apply the transition to.

.elemento {
  /* Default */
  transition-property: all;

  /* Only to one property, such as the width */
  transition-property: width;
}

More information

Timing function

Function that defines the curve of the animation.

.elemento {
  /* Default */
  transition-timing-function: ease;

  /* Other preset functions */
  transition-timing-function: ease-in;
  transition-timing-function: ease-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: linear;


  /* Custom */
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

You can interact with several examples, and even discover new ones, at easings.net.

More information

Delay

Time it will take to start.

.elemento {
  /* Default */
  transition-delay: 0s;

  /* 1 second */
  transition-delay: 1s;
}

More information