CSS Transition

â—‡ What is a CSS Transition?

Definition: Enables smooth changes between different states of CSS properties over a defined duration.

Shorthand property: Combines multiple transition-related properties into a single declaration.

â—ˆ What does transition do?

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

â—ˆ Why do you use transition?

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

â—ˆ Where would you use transition?

Transition is mostly apply on interactive elements such as:

  • Button
  • Links
  • Labels
  • Selects
  • Input Types:
    • Button
    • Radio
    • Checkbox
    • Submit
    • Reset
    • Range
    • Image

â—ˆ Key Transition Properties

transition-property: Specifies the CSS property to transition (e.g., width, color, opacity).

transition-duration: Sets how long the transition lasts (in seconds or milliseconds).

transition-delay: Delays the start of the transition.

transition-behavior: pecifies whether transition will be started for properties whose animation behavior is discrete, keyword values are allow-discrete, normal.

transition-timing-function: Defines the speed curve of the transition:

  1. ease: Slow start, faster middle, slow end (default).
  2. linear: Constant speed throughout. (not recommend)
  3. ease-in: Slow start.
  4. ease-out: Slow end.
  5. ease-in-out: Slow start and end.
Ease
Linear
Ease In
Ease Out
Ease In Out

â—† Change color, width and rotation

Hover me

â—† Change padding

Hover me

<div> between hidden and showing.

This is a <div> element that transitions between display: none; opacity: 0 and display: block; opacity: 1. Neat, huh?

Reference

MDN web docs W3 schools