CSS Transitions

Previous Next

Transitions animate changes between two states (e.g., default → :hover). They’re easy to add and very efficient when animating transform and opacity.

1) Basic Transition


.box{
  transition: background-color .3s ease;
}
.box:hover{
  background-color: #C5E1FA;
}

Hover me

2) Multiple Properties & Durations


.card{
  transition: transform .25s ease-out, background-color .35s ease-in, box-shadow .25s;
}

Smooth

3) Delay & Custom Easing


.chip{
  transition: transform .35s cubic-bezier(.2,.7,.2,1) .25s;
}

Delay

4) Transform + Opacity (Performance)


.badge{
  transition: opacity .25s ease, transform .25s ease;
}
.badge:hover{
  opacity: 1;
  transform: translateY(-4px);
}

Lift

5) Accordion with `max-height`


.acc-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.acc-body.open{ max-height: 240px; }

What is a transition?

Transitions animate property changes between states. Height is tricky—use max-height or transform scaleY.

Tip: For truly dynamic heights, compute the content height in JS and set max-height inline.

6) Button Hover & Focus States


.btn{
  transition: background-color .2s, border-color .2s, transform .2s;
}

Action

7) `transitionend` Event (JS)


// Example: toggle a 'done' marker after a transition finishes
el.addEventListener('transitionend', function() {
  // update UI, remove inline styles, etc.
});