27. CSS Transitions

What you will learn

• How to animate a change smoothly with transition
• Duration, timing functions, and delay
• Which properties animate well
• How to respect visitors who prefer less motion

What is a transition?

Normally a style change, such as a hover colour, happens instantly. A transition makes the browser change gradually over a set time. You put the transition on the element’s normal state, and the effect plays when the style changes.

<style>
  .btn {
    padding: 12px 24px;
    color: white;
    background-color: #0d6efd;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .btn:hover { background-color: #082b59; }
</style>

<button class="btn" type="button">Hover over me</button>

The four parts

The shorthand puts them in this order: transition: property duration timing-function delay;

Animating several properties

<style>
  .card {
    width: 180px;
    padding: 20px;
    background-color: #eaf5ff;
    border: 1px solid #cfe6ff;
    border-radius: 8px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(8, 43, 89, 0.2);
  }
</style>

<div class="card">Hover: I lift up</div>

Transforms

The transform property moves, scales, or rotates an element without disturbing the layout around it.

Timing functions

• ease: starts slowly, speeds up, then slows down (the default).
• linear: constant speed.
• ease-in: slow start. ease-out: slow finish.
• ease-in-out: slow at both ends.

Good practice

• Keep transitions short: 0.15 to 0.4 seconds feels responsive.
• For smooth performance, animate transform and opacity. Animating width, height, or margin makes the browser recalculate the layout and can look jerky.
• Avoid transition: all in real projects. Name the properties you mean to animate.
• Never rely on an animation to carry essential meaning.

Respecting reduced motion

Some people get dizzy or distracted by movement and ask their device to reduce it. Honour that with a media query:

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

A first look at animation

Transitions go from one state to another. For repeating or multi-step effects, CSS has @keyframes with the animation property:

<style>
  @keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
  }
  .dot {
    width: 50px;
    height: 50px;
    background-color: #0d6efd;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .dot { animation: none; }
  }
</style>

<div class="dot"></div>

Common mistakes

• Putting the transition only on :hover, so the change eases in but snaps back out. Put it on the normal state.
• Forgetting the time unit: transition: color 0.3 is invalid. Write 0.3s.
• Trying to transition from display: none, which cannot animate.
• Very long or bouncy effects that slow people down.

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: #0d6efd;
    transition: background-color 0.4s ease, transform 0.4s ease;
  }
  .box:hover {
    background-color: crimson;
    transform: rotate(15deg);
  }
</style>
<div class="box"></div>

Summary

• transition smooths a change over time.
• Use short durations and animate transform and opacity.
• Always offer a reduced-motion option.