CSS — Part-8 Transitions and Animations

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to
• the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

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

Change Several Property Values

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

Specify the Speed Curve of the Transition

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

It can have the following values:-

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
• linear - specifies a transition effect with the same speed from start to end
• ease-in - specifies a transition effect with…