How to create fade in animation css

CssHow-ToBeginner · 3 min read

How to Create Fade In Animation in CSS: Simple Guide

To create a fade in animation in CSS, use the @keyframes rule to change the opacity from 0 to 1, then apply it with the animation property on the element. This smoothly makes the element appear by gradually increasing its transparency.

📐

Syntax

The fade in animation uses the @keyframes rule to define how the opacity changes over time. Then, the animation property applies this effect to an element.

@keyframes fadeIn: Defines the animation named fadeIn.
from { opacity: 0; }: Starts fully transparent.
to { opacity: 1; }: Ends fully visible.
animation: fadeIn 2s ease forwards;: Runs the animation for 2 seconds with smooth speed and keeps the final state.

css

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  opacity: 0;
  animation: fadeIn 2s ease forwards;
}

💻

Example

This example shows a box that fades in smoothly when the page loads. The box starts invisible and becomes fully visible in 2 seconds.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fade In Animation Example</title>
<style>
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .fade-in-box {
    width: 200px;
    height: 100px;
    background-color: #4a90e2;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
    border-radius: 8px;
    margin: 2rem auto;
  }
</style>
</head>
<body>
  <div class="fade-in-box">Hello!</div>
</body>
</html>

Output

A blue rectangular box with white text "Hello!" appears in the center of the page, fading in smoothly over 2 seconds from invisible to fully visible.

⚠️

Common Pitfalls

Common mistakes when creating fade in animations include:

Not setting the initial opacity to 0 on the element, so it appears visible before the animation starts.
Forgetting forwards in the animation property, which keeps the element visible after the animation ends.
Using visibility or display properties incorrectly, which do not animate smoothly.

Always use opacity for smooth fade effects and control visibility with animation states.

css

/* Wrong way: element visible before animation starts */
.element {
  animation: fadeIn 2s ease;
}

/* Right way: start invisible and keep visible after animation */
.element {
  opacity: 0;
  animation: fadeIn 2s ease forwards;
}

📊

Quick Reference

Summary tips for fade in animation in CSS:

Use @keyframes to animate opacity from 0 to 1.
Set initial opacity: 0; on the element.
Use animation: fadeIn duration ease forwards; to run and keep the final state.
Do not animate display or visibility for fade effects.
Adjust duration and timing-function for different speeds and smoothness.

✅

Key Takeaways

Use @keyframes to animate opacity from 0 to 1 for fade in effects.

Set the element's initial opacity to 0 to start fully transparent.

Include 'forwards' in animation to keep the element visible after fading in.

Avoid animating display or visibility properties for smooth fades.

Adjust animation duration and easing for desired speed and smoothness.