CSS — Transition

CSS Transition

CSS transitions allow you to change property values over a given duration.

The following example shows a 100px * 100px red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

The transition effect will start when the specified CSS property (width) changes value.

Now, let us specify a new value for the width property when a user mouses over the <div> element:

div:hover {
  width: 300px;
}

CSS Transition Property

Change Several Property Values

Separate all properties with a comma.

div {
  transition: width 2s, height 4s;
}

Adding Multiple Transitions

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

Get TARUN KUMAR’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The transition-timing-function property can have the following values:

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is the default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with a slow start
• ease-out - specifies a transition effect with a slow end
• ease-in-out - specifies a transition effect with a slow start and end
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the transition effect.

The following example has a 1-second delay before starting:

div {
  transition-delay: 1s;
}

Transition + Transformation

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}
div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

Transition with Transform

Explore more about Transition & Transform property. Get help from your goof friend Google 😉

Instructor ~ TARUN KUMAR

LAZY SYNTAX