← Back to Gallery / Intermediate / 03: Fade Effects

Fade & Transition Effects

Create smooth animations without JavaScript frameworks
Learn how to use hyperscript's transition command with CSS to create beautiful fade-in, fade-out, and slide effects. Perfect for polished user experiences!
transitions opacity toggle wait

Demo 1: Fade In/Out

Toggle opacity for smooth fade effects:

💫 Fading Content

Watch this box fade in and out smoothly using CSS transitions and hyperscript's opacity toggle!

Demo 2: Slide Transition

Combine transform and opacity for slide effects:

🎯 Sliding Panel

This panel slides in and out using CSS transforms. The .slide-out class applies translateX(-100%) with opacity transition.

Demo 3: Toast Notification

Auto-dismissing notification with fade animation:

✅ Success! This notification will auto-dismiss in 3 seconds.

Demo 4: Sequential Fade

Chain multiple fade animations in sequence:

Box 1
Box 2
Box 3

Demo 5: Scale & Rotate

Combine multiple transform effects:

Transform Demo

This box can scale and rotate with smooth CSS transitions!

The Code

Basic Fade Toggle:

<button _="on click toggle .fade-out on #element"> Fade Toggle </button> <div id="element" class="fade-box" style="transition: opacity 0.5s"> Content to fade </div> <!-- CSS: .fade-out { opacity: 0 !important; } -->

Auto-Dismiss Notification:

<button _="on click add .show to #notification wait 3s remove .show from #notification"> Show Toast </button> /* CSS */ .notification { opacity: 0; transition: opacity 0.3s ease; } .notification.show { opacity: 1; }

Sequential Animation:

<button _="on click add .fade-out to #box-1 wait 0.5s add .fade-out to #box-2 wait 0.5s add .fade-out to #box-3"> Fade Sequence </button> /* CSS */ .fade-box { transition: opacity 0.5s ease; } .fade-out { opacity: 0; }

Slide Animation:

<button _="on click toggle .slide-out on #panel"> Slide Toggle </button> /* CSS */ .slide-box { transition: transform 0.5s ease, opacity 0.5s ease; } .slide-box.slide-out { transform: translateX(-100%); opacity: 0; }

How it works:

Key Concepts:

CSS Transition Properties:

/* Basic transition */ transition: opacity 0.5s ease; /* Multiple properties */ transition: opacity 0.3s ease, transform 0.5s ease; /* Timing functions */ transition: all 0.3s ease-in-out; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Delay */ transition: opacity 0.5s ease 0.2s; /* 0.2s delay */

Advanced Patterns:

<!-- Fade in on page load --> <div _="on load add .fade-out to me wait 0.1s remove .fade-out from me"> Content </div> <!-- Stagger animation for list items --> <button _="on click repeat for item in .list-item index i add .fade-in to item wait 0.2s end"> Animate List </button> <!-- Bounce effect --> <button _="on click add .scale-up to #element wait 0.3s remove .scale-up from #element"> Bounce </button> <!-- Crossfade between elements --> <button _="on click add .fade-out to #panel-1 wait 0.5s hide #panel-1 show #panel-2 remove .fade-out from #panel-2"> Crossfade </button>

Common Use Cases:

Performance Tips:

Try it yourself:

← Previous: Fetch Data Next: Tab Navigation →