CSS transitions let you smoothly change properties over a set amount of time. When an element changes state—like when a user hovers over it—the transition property tells the browser how long and in what manner the change should happen.

Transitions are defined using three main values:

• Property: The CSS property that you want to animate.
• Duration: The time over which the animation occurs.
• Timing Function: Determines the speed curve of the animation, such as linear, ease-in, ease-out, or ease-in-out.

Syntax

selector {
  transition: property duration timing-function;
}

Explanation:

• property:
  • The specific property to animate (for example, background-color or width).
• duration:
  • The time it takes for the transition to complete (for example, 0.5s for half a second).
• timing-function:
  • Controls how the intermediate values of the transition are calculated. Common values include:
    • linear – Even speed from start to finish.
    • ease – Starts slow, speeds up, and then slows down.
    • ease-in – Starts slow.
    • ease-out – Ends slow.
    • ease-in-out – Starts and ends slow.

Example 1: Transition on Background Color Change

In this example, a button smoothly changes its background color over 0.5 seconds when hovered over.

Explanation:

• Default Button Style:
  • The button starts with a green background (#4caf50).
• On Hover:
  • The background color changes to a darker green (#45a049).
• Transition Effect:
  • The transition property makes the background color change smoothly over 0.5 seconds with an "ease" timing function.

Example 2: Transition on Multiple Properties

In this example, a box changes both its width and its background color smoothly when hovered. This shows how you can animate more than one property at the same time.

Explanation:

• Default Box Style:
  • The box starts at 200px wide with an orange background.
• On Hover:
  • The box expands to 300px in width and the background changes to a darker shade of orange.
• Transition Details:
  • width changes over 0.5 seconds with an ease-in-out timing function.
  • background-color changes over 0.5 seconds with a linear timing function.
• Outcome:
  • Both properties animate at the same time, each following their defined timing curve.

By using the transition property, you can enhance user interactions with smooth changes. This not only improves the aesthetics of your website but also provides clear visual feedback when users interact with elements.