Fetch snippet JSON: curl https://webspire.de/snippets/animations/fade-in.json

Hello, World

This element animates in

BG:

Quick Start

<div class="animate-fade-in-up">Hello World</div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
827 bytes · 43 lines
Custom Properties
--anim-duration
Classes
.animate-fade-in.animate-fade-in-up.animate-fade-in-down
Dependencies
easing/tokens
fade entrance motion transition

Clean fade-in animations with a professional spring-like easing curve. Three variants: .animate-fade-in (simple), .animate-fade-in-up (from below), .animate-fade-in-down (from above).

Hero section with Tailwind

<section class="flex flex-col items-center text-center py-24 px-8">
  <span class="animate-fade-in rounded-full bg-white/10 px-4 py-1.5
               text-xs font-medium text-white/70 border border-white/10">
    Now in beta
  </span>
  <h1 class="animate-fade-in-up mt-6 text-5xl font-black
             tracking-tight text-white">
    Build faster UIs
  </h1>
  <p class="animate-fade-in-up mt-4 max-w-md text-lg text-white/60"
     style="animation-delay: 0.1s">
    Copy-paste CSS effects that compose with Tailwind.
  </p>
  <div class="animate-fade-in-up mt-8 flex gap-3"
       style="animation-delay: 0.2s">
    <a class="rounded-full bg-white px-6 py-3 text-sm font-semibold
              text-black hover:bg-white/90 transition-colors"
       href="#">Get started</a>
    <a class="rounded-full border border-white/20 px-6 py-3 text-sm
              text-white hover:bg-white/10 transition-colors"
       href="#">View docs</a>
  </div>
</section>