CSS Fade In Transition with Opacity

Fading Elements with CSS Transitions

The opacity-based fade is the most fundamental CSS transition. It smoothly changes an element's visibility from transparent to opaque (or vice versa), creating a polished appearance/disappearance effect.

CSS Code

.element {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.element.visible {
  opacity: 1;
}

How It Works

The opacity property accepts values from 0 (fully transparent) to 1 (fully opaque). By defining a transition on opacity, the browser interpolates between these values over the specified duration.

• Property: opacity — controls the element's transparency
• Duration: 0.3s — the transition completes in 300 milliseconds
• Timing function: ease-in — starts slow, accelerates toward the end

Performance Note

Opacity transitions are GPU-accelerated because they only affect the compositing layer. The browser does not need to recalculate layout or repaint pixels — it simply changes the alpha value of the already-rendered layer. This makes opacity transitions one of the cheapest animations you can use.

Triggering the Fade

You can trigger the fade with a CSS class toggle via JavaScript, or use CSS pseudo-classes:

.element:hover {
  opacity: 0.7;
}

The transition plays both ways — fading out on hover and back to full opacity when the cursor leaves.