Transitions in CSS — Smoothly Animate Property Changes

CSS Transitions let you smoothly change property values over time instead of instantly, improving the user experience.

Basic Syntax

selector {  transition: property duration timing-function delay;}

• property: Which CSS property to animate (e.g., all, color, width)

• duration: How long the transition takes (e.g., 0.5s, 300ms)

• timing-function: Speed curve of the transition (ease, linear, ease-in, ease-out, cubic-bezier(...))

• delay: Wait time before starting the transition (optional)

Example: Smooth Background Color Change

button {  background-color: blue;  color: white;  transition: background-color 0.3s ease;}button:hover {  background-color: green;}

When you hover the button, the background color changes smoothly over 0.3 seconds.

Properties You Can Animate

• Colors: color, background-color, border-color, etc.

• Size and Position: width, height, margin, padding, top, left, etc.

• Opacity

• Transformations: transform (scale, rotate, translate)

• Many others — except non-animatable properties like display

Using transition Shorthand vs Individual Properties

/* Shorthand */element {  transition: all 0.5s ease-in-out 0s;}/* Individual */element {  transition-property: all;  transition-duration: 0.5s;  transition-timing-function: ease-in-out;  transition-delay: 0s;}

Multiple Transitions

You can animate multiple properties at once:

div {  transition: background-color 0.3s ease, transform 0.5s ease-in-out;}div:hover {  background-color: red;  transform: scale(1.1);}

If you want, I can show you examples with transform transitions, fancy hover effects, or how to combine transitions with animations!