css-transitions.md

⚑ CSS Transitions

This properties is important to show the immediate changes on the elements at each time.

Transitions will reflect on basis of changes in the element. But CSS animations are slightly different than Transitions by changing the style in the sequence order.

☴ Overview:

1. Transition properties
2. Transition duration
3. Transition timing functions
4. Transition delay
5. Shorthand Transition Property
6. Resize Property

✦ Transition Properties:

It specify which properties should transition when their values get change.

Syntax: transition-property: property1, property2, ...;

Example:

div {
  transition-property: background-color, transform;
}

✦ Transition Duration:

It sets the duration of the transition.

Syntax: transition-duration: value;

Example:

div {
  transition-duration: 0.5s;
}

✦ Transition Timing Functions:

It defines the speed curve of the transition.

Syntax: transition-timing-function: value;

Example:

div {
  transition-timing-function: ease-in-out;
}

✦ Transition Delay:

It sets the delay before the transition starts.

Syntax: transition-delay: value;

Example:

div {
  transition-delay: 1s;
}

✦ Shorthand Transition Property:

It specifies all properties for the transition of the element.

Syntax: transition: property duration timing-function delay;

transition: background-color 0.5s ease-in-out 1s;

✦ Resize Property:

It allows the user to resize the element. It can be resized vertical, horizontal or both.

Syntax: resize: axis-value;

resize: both;

---

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page