Fades, slides, zooms, bounces and flips for content arriving on screen — ideal for scroll reveals and page loads.
No animations match your search in this category.
Every effect above, with the markup to use and the complete CSS. Each one is self-contained: paste the CSS once, add the class, done.
The workhorse of UI motion. Animates opacity only — the cheapest property a browser can animate.
Markup
<div class="fh-fade-in">Your content</div>CSS
.fh-fade-in {
animation: fh-fadeIn 0.8s ease-out both;
}
@keyframes fh-fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}The most common scroll-reveal entrance. Pair it with an IntersectionObserver to trigger when the element scrolls into view.
Markup
<div class="fh-fade-in-up">Your content</div>CSS
.fh-fade-in-up {
animation: fh-fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fh-fadeInUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}Natural for dropdown menus, toasts and notification banners that enter from the top.
Markup
<div class="fh-fade-in-down">Your content</div>CSS
.fh-fade-in-down {
animation: fh-fadeInDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fh-fadeInDown {
from { opacity: 0; transform: translateY(-28px); }
to { opacity: 1; transform: translateY(0); }
}Good for sidebars and staggered list items. Stagger with animation-delay: 0.05s per item.
Markup
<div class="fh-fade-in-left">Your content</div>CSS
.fh-fade-in-left {
animation: fh-fadeInLeft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fh-fadeInLeft {
from { opacity: 0; transform: translateX(-32px); }
to { opacity: 1; transform: translateX(0); }
}Mirror of Fade In Left — ideal for right-hand drawers and chat panels.
Markup
<div class="fh-fade-in-right">Your content</div>CSS
.fh-fade-in-right {
animation: fh-fadeInRight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fh-fadeInRight {
from { opacity: 0; transform: translateX(32px); }
to { opacity: 1; transform: translateX(0); }
}A classic for modals and image lightboxes. Scale + opacity both run on the GPU compositor.
Markup
<div class="fh-zoom-in">Your content</div>CSS
.fh-zoom-in {
animation: fh-zoomIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fh-zoomIn {
from { opacity: 0; transform: scale(0.6); }
to { opacity: 1; transform: scale(1); }
}The overshoot gives a playful, springy feel. Great for success states, badges and empty-state illustrations.
Markup
<div class="fh-bounce-in">Your content</div>CSS
.fh-bounce-in {
animation: fh-bounceIn 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
@keyframes fh-bounceIn {
0% { opacity: 0; transform: scale(0.3); }
50% { opacity: 1; transform: scale(1.05); }
70% { transform: scale(0.92); }
100% { opacity: 1; transform: scale(1); }
}A 3D flip around the horizontal axis. The perspective() value controls how dramatic the depth feels.
Markup
<div class="fh-flip-in-x">Your content</div>CSS
.fh-flip-in-x {
animation: fh-flipInX 0.8s ease-out both;
}
@keyframes fh-flipInX {
0% { opacity: 0; transform: perspective(600px) rotateX(90deg); }
40% { transform: perspective(600px) rotateX(-18deg); }
70% { transform: perspective(600px) rotateX(8deg); }
100% { opacity: 1; transform: perspective(600px) rotateX(0); }
}A cinematic focus-pull. filter: blur() is heavier than transform, so reserve it for hero moments, not lists.
Markup
<div class="fh-blur-in">Your content</div>CSS
.fh-blur-in {
animation: fh-blurIn 0.9s ease-out both;
}
@keyframes fh-blurIn {
from { opacity: 0; filter: blur(12px); }
to { opacity: 1; filter: blur(0); }
}High-energy entrance for playful brands. Use sparingly — one rolling element per view is plenty.
Markup
<div class="fh-roll-in">Your content</div>CSS
.fh-roll-in {
animation: fh-rollIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fh-rollIn {
from { opacity: 0; transform: translateX(-60px) rotate(-120deg); }
to { opacity: 1; transform: translateX(0) rotate(0); }
}An entrance animation orients the eye. When new content appears — a modal, a search result, a section scrolling into view — a brief fade or slide tells the viewer where it came from and that it belongs there. Content that simply pops into existence forces the eye to re-scan the page to work out what changed.
Direction carries meaning. Content sliding up reads as arriving from below (natural for scroll reveals); sliding down suits notifications and dropdowns descending from the top; sliding in from a side fits drawers and panels. Matching the direction to where the element actually lives makes the motion feel explanatory rather than arbitrary.
Most entrances are used as scroll reveals, and the right way to trigger them is IntersectionObserver — not a scroll listener. A scroll handler fires hundreds of times a second on the main thread and forces layout reads; IntersectionObserver does the visibility maths off-thread and calls you only when an element crosses the threshold you set.
Reveal each element once and then stop observing it. Content that re-animates every time it scrolls back into view is distracting and makes a page feel unstable — a mistake that's easy to make and easy to fix with observer.unobserve(entry.target).
For lists and grids, a small animation-delay per item — around 50 to 80ms — creates a cascade that guides the eye through the sequence. Beyond about eight items the last ones take too long to arrive, so cap the stagger rather than multiplying indefinitely.
The most common failure is animating everything. If every section on a page fades in, the effect stops meaning anything and the page feels slow because content is perpetually arriving. Reserve entrances for content that genuinely appears in response to something, and honour prefers-reduced-motion so people who've asked for stillness get it.
Use IntersectionObserver to add a class when the element enters the viewport, then unobserve it so it animates once. Avoid scroll event listeners — they fire constantly on the main thread and cause jank.
No. Re-animating content each time it scrolls back into view is distracting and makes a page feel unstable. Reveal once and stop observing that element.
Between 300 and 600 milliseconds for most entrances. Shorter feels abrupt for content arriving, longer delays the reader. Never gate an action the user must wait for behind an animation.
Reveal content on scroll with animation-timeline: view(), add an IntersectionObserver fallback, and never hide content that only JavaScript can show.
Read the recipe → AttentionPulses, shakes and celebratory effects
Browse the category → LoadersSpinners, skeletons and progress bars
Browse the category → TextTypewriter, gradient flow and glitch effects
Browse the category →