|$ curl https://forge-ai.dev/api/markdown?path=docs/components/animations

$cat docs/animations-&-micro-interactions.md

updated Recently·22 min read·published

Animations & Micro-interactions

◆CSS◆HTML◆Tailwind◆Bootstrap◆UI◆Animation◆Advanced🎯Free Tools

Motion in Modern UI

Animation is not decoration — it guides attention, confirms actions, and makes interfaces feel alive. This guide covers real transitions used in modern design systems: micro-interactions, page transitions, skeleton shimmers, staggered lists, and spring-like easing.

ℹ

info

Keep micro-interactions between 150ms and 300ms. Slower feels sluggish; faster feels invisible. Always respect prefers-reduced-motion.

Button Micro-interactions

Buttons should respond to hover, focus, and active states with subtle transform and shadow changes. A small lift on hover and a pressed scale on active gives tactile feedback.

button-motion

Live

untitled.html

HTML

1	<div class="group">
2	<button class="btn lift">
3	Hover Lift
4	</button>
5	<button class="btn press">
6	Press Scale
7	</button>
8	<button class="btn glow">
9	Glow Pulse
10	</button>
11	<button class="btn ripple">
12	Ripple
13	</button>
14	</div>

preview

Card Transitions

Cards benefit from lift, glow, and content reveal on hover. Keep the layout stable — animate only transform and opacity to avoid expensive reflows.

card-motion

Live

untitled.html

HTML

1	<div class="card">
2	<div class="card-img">
3	</div>
4	<div class="card-body">
5	<h3 class="card-title">
6	Hover Me
7	</h3>
8	<p class="card-desc">
9	Lift + glow + content slide.
10	</p>
11	</div>
12	</div>

preview

Modal & Panel Transitions

Modals should fade the backdrop and scale the content in. Slide panels should translate from the edge. Use opacity and transform for GPU-accelerated motion.

modal-motion

Live

untitled.html

HTML

1	<div class="demo">
2	<button class="open-btn" id="open">
3	Open Modal
4	</button>
5	<div class="overlay" id="overlay">
6	<div class="modal">
7	<h3>
8	Modal Title
9	</h3>
10	<p>
11	Fades and scales in.
12	</p>
13	<button id="close">
14	Close
15	</button>
16	</div>
17	</div>
18	</div>

preview

Skeleton Shimmer

Skeleton loaders use a moving gradient to suggest activity. Animate background-position or transform for a smooth shimmer without layout shifts.

skeleton-shimmer

Live

untitled.html

HTML

1	<div class="card-skel">
2	<div class="circle">
3	</div>
4	<div class="lines">
5	<div class="line">
6	</div>
7	<div class="line short">
8	</div>
9	</div>
10	</div>

preview

Staggered List

When a list appears, stagger each item so the eye follows the sequence. Use CSS custom properties for delay values to keep the markup clean.

staggered-list

Live

untitled.html

HTML

1	<button class="replay" id="replay">
2	Replay
3	</button>
4	<ul class="list">
5	<li style="--i:0">
6	Item one
7	</li>
8	<li style="--i:1">
9	Item two
10	</li>
11	<li style="--i:2">
12	Item three
13	</li>
14	<li style="--i:3">
15	Item four
16	</li>
17	</ul>

preview

Easing Reference

Easing curves control the feel of motion. Use spring-like curves for playful UI and smooth deceleration for natural movement.

easing

Live

untitled.html

HTML

1	<div class="track">
2	<div class="ball" data-ease="ease">
3	ease
4	</div>
5	<div class="ball" data-ease="ease-out">
6	ease-out
7	</div>
8	<div class="ball" data-ease="spring">
9	spring
10	</div>
11	<button id="run">
12	Run
13	</button>
14	</div>

preview

Respect Reduced Motion

Always wrap motion in @media (prefers-reduced-motion: no-preference). Users with vestibular disorders or motion sensitivity need static alternatives.

untitled.css

CSS

1	@media (prefers-reduced-motion: no-preference) {
2	.card {
3	transition: transform 0.3s ease, box-shadow 0.3s ease;
4	}
5	.card:hover {
6	transform: translateY(-6px);
7	box-shadow: 0 20px 40px rgba(0, 255, 65, 0.12);
8	}
9	}
10
11	@media (prefers-reduced-motion: reduce) {
12	.card {
13	transition: none;
14	}
15	.card:hover {
16	border-color: #00FF41;
17	}
18	}

Performance Rules

Animate only transform and opacity for 60fps GPU compositing.
Avoid animating width, height, top, left, margin, or padding.
Use will-change sparingly and remove it after the animation ends.
Throttle scroll-linked animations with requestAnimationFrame.
Test on low-end devices and with reduced motion enabled.

Accessibility

Do not auto-play animations that cannot be paused.
Provide a visible focus indicator for keyboard users.
Use motion to reinforce state changes, not to convey information alone.
Respect prefers-reduced-motion for all non-essential motion.
Keep loading spinners below 2 seconds or show progress.

Community

Get help on Slack, Discord or VIP

Stuck on a guide? Join the community and ask.

Join Slack Join Discord Kaundal VIP

X GitHub YouTube Instagram Facebook Discord Slack Telegram Buy me a coffee Ko-fi Sponsor

1	.group {
2	display:flex;
3	flex-wrap:wrap;
4	gap:16px;
5	align-items:center;
6	justify-content:center;
7	padding:32px
8	}
9	.btn {
10	padding:10px 20px;
11	border-radius:8px;
12	font-size:13px;
13	font-weight:600;
14	font-family:system-ui,
15	sans-serif;
16	cursor:pointer;
17	border:none;
18	background:#00FF41;
19	color:#0A0A0A;
20	transition:all .2s cubic-bezier(.4,
21	0,
22	.2,
23	1)
24	}
25	.lift:hover {
26	transform:translateY(-3px);
27	box-shadow:0 10px 25px rgba(0,
28	255,
29	65,
30	.25)
31	}
32	.press:active {
33	transform:scale(.96)
34	}
35	.glow:hover {
36	animation:glowPulse 1.5s infinite
37	}
38	@keyframes glowPulse {
39	0% {
40	box-shadow:0 0 0 0 rgba(0,
41	255,
42	65,
43	.4)
44	}
45	70% {
46	box-shadow:0 0 0 12px rgba(0,
47	255,
48	65,
49	0)
50	}
51	100% {
52	box-shadow:0 0 0 0 rgba(0,
53	255,
54	65,
55	0)
56	}
57	}
58	.ripple {
59	position:relative;
60	overflow:hidden
61	}
62	.ripple::after {
63	content:'';
64	position:absolute;
65	inset:0;
66	background:radial-gradient(circle,
67	rgba(255,
68	255,
69	255,
70	.4) 0%,
71	transparent 70%);
72	transform:scale(0);
73	opacity:0;
74	transition:transform .4s,
75	opacity .4s
76	}
77	.ripple:active::after {
78	transform:scale(2.5);
79	opacity:1;
80	transition:0s
81	}

1	.card {
2	max-width:260px;
3	margin:32px auto;
4	background:#111;
5	border:1px solid #222;
6	border-radius:12px;
7	overflow:hidden;
8	transition:all .35s cubic-bezier(.4,
9	0,
10	.2,
11	1);
12	cursor:pointer
13	}
14	.card:hover {
15	transform:translateY(-6px);
16	border-color:#00FF41;
17	box-shadow:0 20px 40px rgba(0,
18	255,
19	65,
20	.12)
21	}
22	.card-img {
23	height:120px;
24	background:linear-gradient(135deg,
25	#1A1A2E,
26	#2A1A3E);
27	transition:transform .35s
28	}
29	.card:hover .card-img {
30	transform:scale(1.05)
31	}
32	.card-body {
33	padding:18px;
34	transition:transform .35s
35	}
36	.card:hover .card-body {
37	transform:translateY(-4px)
38	}
39	.card-title {
40	font-size:15px;
41	font-weight:600;
42	color:#E0E0E0;
43	margin:0 0 6px
44	}
45	.card-desc {
46	font-size:12px;
47	color:#808080;
48	margin:0
49	}

1	.demo {
2	display:flex;
3	align-items:center;
4	justify-content:center;
5	padding:32px
6	}
7	.open-btn {
8	padding:10px 20px;
9	border-radius:8px;
10	font-size:13px;
11	font-weight:600;
12	cursor:pointer;
13	background:#00FF41;
14	color:#0A0A0A;
15	border:none
16	}
17	.overlay {
18	position:fixed;
19	inset:0;
20	background:rgba(0,
21	0,
22	0,
23	.7);
24	display:none;
25	align-items:center;
26	justify-content:center;
27	opacity:0;
28	transition:opacity .3s
29	}
30	.overlay.show {
31	display:flex;
32	opacity:1
33	}
34	.modal {
35	background:#151515;
36	border:1px solid #2A2A3E;
37	border-radius:12px;
38	padding:24px;
39	max-width:320px;
40	transform:scale(.9) translateY(20px);
41	transition:transform .3s cubic-bezier(.34,
42	1.56,
43	.64,
44	1)
45	}
46	.overlay.show .modal {
47	transform:scale(1) translateY(0)
48	}
49	.modal h3 {
50	color:#E0E0E0;
51	margin:0 0 8px;
52	font-size:16px
53	}
54	.modal p {
55	color:#808080;
56	margin:0 0 16px;
57	font-size:13px
58	}
59	.modal button {
60	padding:8px 16px;
61	border-radius:6px;
62	font-size:12px;
63	font-weight:600;
64	cursor:pointer;
65	background:#00FF41;
66	color:#0A0A0A;
67	border:none
68	}

1	.card-skel {
2	display:flex;
3	align-items:center;
4	gap:16px;
5	max-width:320px;
6	margin:32px auto;
7	padding:20px;
8	background:#111;
9	border:1px solid #222;
10	border-radius:12px
11	}
12	.circle {
13	width:56px;
14	height:56px;
15	border-radius:50%;
16	background:linear-gradient(90deg,
17	#1A1A2E 25%,
18	#2A2A3E 50%,
19	#1A1A2E 75%);
20	background-size:200% 100%;
21	animation:shimmer 1.5s infinite
22	}
23	.line {
24	height:12px;
25	border-radius:4px;
26	background:linear-gradient(90deg,
27	#1A1A2E 25%,
28	#2A2A3E 50%,
29	#1A1A2E 75%);
30	background-size:200% 100%;
31	animation:shimmer 1.5s infinite;
32	margin-bottom:10px
33	}
34	.short {
35	width:60%
36	}
37	.lines {
38	flex:1
39	}
40	@keyframes shimmer {
41	0% {
42	background-position:200% 0
43	}
44	100% {
45	background-position:-200% 0
46	}
47	}

1	.replay {
2	display:block;
3	margin:16px auto;
4	padding:8px 16px;
5	border-radius:6px;
6	font-size:12px;
7	font-weight:600;
8	cursor:pointer;
9	background:#1A1A2E;
10	color:#E0E0E0;
11	border:1px solid #2A2A3E
12	}
13	.list {
14	list-style:none;
15	padding:0;
16	margin:16px auto;
17	max-width:260px
18	}
19	.list li {
20	padding:12px 16px;
21	margin-bottom:8px;
22	background:#111;
23	border:1px solid #222;
24	border-radius:8px;
25	color:#A0A0A0;
26	font-size:13px;
27	opacity:0;
28	transform:translateY(16px);
29	animation:slideIn .4s cubic-bezier(.4,
30	0,
31	.2,
32	1) forwards;
33	animation-delay:calc(var(--i)*80ms)
34	}
35	@keyframes slideIn {
36	to {
37	opacity:1;
38	transform:translateY(0)
39	}
40	}

1	<div class="flex flex-wrap gap-4 items-center justify-center p-8 bg-[#0A0A0A]">
2	<button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A] transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] hover:-translate-y-[3px] hover:shadow-[0_10px_25px_rgba(0,255,65,0.25)]">
3	Hover Lift
4	</button>
5	<button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A] transition-all duration-200 active:scale-[0.96]">
6	Press Scale
7	</button>
8	<button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A] transition-all duration-200 hover:animate-[glow_1.5s_infinite]">
9	Glow Pulse
10	</button>
11	<button class="relative overflow-hidden px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A] active:after:scale-[2.5] active:after:opacity-100 after:content-[''] after:absolute after:inset-0 after:bg-[radial-gradient(circle,rgba(255,255,255,0.4)_0%,transparent_70%)] after:scale-0 after:opacity-0 after:transition-all after:duration-400">
12	Ripple
13	</button>
14	</div>

1	<div class="d-flex flex-wrap gap-3 align-items-center justify-content-center p-4">
2	<button class="btn fw-semibold lift" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A">
3	Hover Lift
4	</button>
5	<button class="btn fw-semibold press" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A">
6	Press Scale
7	</button>
8	<button class="btn fw-semibold glow" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A">
9	Glow Pulse
10	</button>
11	<button class="btn fw-semibold ripple" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A">
12	Ripple
13	</button>
14	</div>

1	<div class="flex items-center justify-center p-8 bg-[#0A0A0A]">
2	<div class="max-w-[260px] bg-[#111] border border-[#222] rounded-xl overflow-hidden cursor-pointer transition-all duration-[350ms] ease-[cubic-bezier(0.4,0,0.2,1)] hover:-translate-y-1.5 hover:border-[#00FF41] hover:shadow-[0_20px_40px_rgba(0,255,65,0.12)] group">
3	<div class="h-[120px] bg-gradient-to-br from-[#1A1A2E] to-[#2A1A3E] transition-transform duration-[350ms] group-hover:scale-105">
4	</div>
5	<div class="p-[18px] transition-transform duration-[350ms] group-hover:-translate-y-1">
6	<h3 class="text-[15px] font-semibold text-[#E0E0E0] mb-1.5">
7	Hover Me
8	</h3>
9	<p class="text-xs text-[#808080]">
10	Lift + glow + content slide.
11	</p>
12	</div>
13	</div>
14	</div>

1	<div class="d-flex justify-content-center p-4">
2	<div class="card card-motion" style="max-width:260px;background:#111;border-color:#222">
3	<div class="card-img-top" style="height:120px;background:linear-gradient(135deg,#1A1A2E,#2A1A3E)">
4	</div>
5	<div class="card-body">
6	<h5 class="card-title text-white">
7	Hover Me
8	</h5>
9	<p class="card-text text-secondary" style="font-size:12px">
10	Lift + glow + content slide.
11	</p>
12	</div>
13	</div>
14	</div>

1	<div class="flex items-center justify-center p-8 bg-[#0A0A0A]">
2	<button id="open-tw" class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#00FF41] text-[#0A0A0A]">
3	Open Modal
4	</button>
5	<div id="overlay-tw" class="fixed inset-0 bg-black/70 hidden items-center justify-center opacity-0 transition-opacity duration-300">
6	<div class="bg-[#151515] border border-[#2A2A3E] rounded-xl p-6 max-w-[320px] scale-90 translate-y-5 transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]">
7	<h3 class="text-[#E0E0E0] text-base font-semibold mb-2">
8	Modal Title
9	</h3>
10	<p class="text-[#808080] text-[13px] mb-4">
11	Fades and scales in.
12	</p>
13	<button id="close-tw" class="px-4 py-2 rounded-md text-xs font-semibold bg-[#00FF41] text-[#0A0A0A]">
14	Close
15	</button>
16	</div>
17	</div>
18	</div>

1	<div class="d-flex justify-content-center p-4">
2	<button id="open-bs" class="btn fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41">
3	Open Modal
4	</button>
5	<div id="overlay-bs" class="modal align-items-center justify-content-center" style="background:rgba(0,0,0,0.7);display:none;opacity:0;transition:opacity .3s">
6	<div class="modal-content border-secondary" style="background:#151515;transform:scale(.9) translateY(20px);transition:transform .3s cubic-bezier(.34,1.56,.64,1)">
7	<div class="modal-body">
8	<h5 class="text-white">
9	Modal Title
10	</h5>
11	<p class="text-secondary">
12	Fades and scales in.
13	</p>
14	<button id="close-bs" class="btn btn-sm fw-semibold" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41">
15	Close
16	</button>
17	</div>
18	</div>
19	</div>
20	</div>

1	<div class="flex items-center justify-center p-8 bg-[#0A0A0A]">
2	<div class="flex items-center gap-4 max-w-[320px] w-full p-5 bg-[#111] border border-[#222] rounded-xl">
3	<div class="w-14 h-14 rounded-full bg-gradient-to-r from-[#1A1A2E] via-[#2A2A3E] to-[#1A1A2E] bg-[length:200%_100%] animate-[shimmer_1.5s_infinite]">
4	</div>
5	<div class="flex-1 space-y-2.5">
6	<div class="h-3 rounded bg-gradient-to-r from-[#1A1A2E] via-[#2A2A3E] to-[#1A1A2E] bg-[length:200%_100%] animate-[shimmer_1.5s_infinite]">
7	</div>
8	<div class="h-3 rounded w-3/5 bg-gradient-to-r from-[#1A1A2E] via-[#2A2A3E] to-[#1A1A2E] bg-[length:200%_100%] animate-[shimmer_1.5s_infinite]">
9	</div>
10	</div>
11	</div>
12	</div>

1	<div class="d-flex justify-content-center p-4">
2	<div class="d-flex align-items-center gap-3 p-4 rounded-3 border border-secondary" style="max-width:320px;background:#111">
3	<div class="rounded-circle shimmer" style="width:56px;height:56px">
4	</div>
5	<div class="flex-grow-1">
6	<div class="shimmer rounded mb-2" style="height:12px;width:100%">
7	</div>
8	<div class="shimmer rounded" style="height:12px;width:60%">
9	</div>
10	</div>
11	</div>
12	</div>

1	<div class="flex flex-col items-center p-6 bg-[#0A0A0A]">
2	<button id="replay-tw" class="mb-4 px-4 py-2 rounded-md text-xs font-semibold bg-[#1A1A2E] text-[#E0E0E0] border border-[#2A2A3E]">
3	Replay
4	</button>
5	<ul id="list-tw" class="w-full max-w-[260px] space-y-2">
6	<li class="px-4 py-3 bg-[#111] border border-[#222] rounded-lg text-[13px] text-[#A0A0A0] opacity-0 translate-y-4 animate-[slideIn_.4s_cubic-bezier(0.4,0,0.2,1)_forwards]" style={{ animationDelay: '0ms' }}>
7	Item one
8	</li>
9	<li class="px-4 py-3 bg-[#111] border border-[#222] rounded-lg text-[13px] text-[#A0A0A0] opacity-0 translate-y-4 animate-[slideIn_.4s_cubic-bezier(0.4,0,0.2,1)_forwards]" style={{ animationDelay: '80ms' }}>
10	Item two
11	</li>
12	<li class="px-4 py-3 bg-[#111] border border-[#222] rounded-lg text-[13px] text-[#A0A0A0] opacity-0 translate-y-4 animate-[slideIn_.4s_cubic-bezier(0.4,0,0.2,1)_forwards]" style={{ animationDelay: '160ms' }}>
13	Item three
14	</li>
15	<li class="px-4 py-3 bg-[#111] border border-[#222] rounded-lg text-[13px] text-[#A0A0A0] opacity-0 translate-y-4 animate-[slideIn_.4s_cubic-bezier(0.4,0,0.2,1)_forwards]" style={{ animationDelay: '240ms' }}>
16	Item four
17	</li>
18	</ul>
19	</div>

1	<div class="d-flex flex-column align-items-center p-4">
2	<button id="replay-bs" class="btn btn-dark border-secondary mb-3">
3	Replay
4	</button>
5	<ul id="list-bs" class="list-unstyled w-100" style="max-width:260px">
6	<li class="stagger-item" style="--i:0">
7	Item one
8	</li>
9	<li class="stagger-item" style="--i:1">
10	Item two
11	</li>
12	<li class="stagger-item" style="--i:2">
13	Item three
14	</li>
15	<li class="stagger-item" style="--i:3">
16	Item four
17	</li>
18	</ul>
19	</div>

1	.track {
2	max-width:360px;
3	margin:24px auto;
4	padding:24px;
5	background:#111;
6	border:1px solid #222;
7	border-radius:12px
8	}
9	.ball {
10	height:28px;
11	line-height:28px;
12	padding:0 12px;
13	margin-bottom:12px;
14	border-radius:6px;
15	background:#00FF41;
16	color:#0A0A0A;
17	font-size:11px;
18	font-weight:600;
19	width:60px;
20	transform:translateX(0);
21	transition:transform 1s
22	}
23	.ball.run {
24	transform:translateX(260px)
25	}
26	.ball[data-ease="ease"] {
27	transition-timing-function:ease
28	}
29	.ball[data-ease="ease-out"] {
30	transition-timing-function:cubic-bezier(0,
31	0,
32	.2,
33	1)
34	}
35	.ball[data-ease="spring"] {
36	transition-timing-function:cubic-bezier(.34,
37	1.56,
38	.64,
39	1)
40	}
41	button {
42	display:block;
43	margin:16px auto 0;
44	padding:8px 16px;
45	border-radius:6px;
46	background:#1A1A2E;
47	color:#E0E0E0;
48	border:1px solid #2A2A3E;
49	cursor:pointer
50	}

1	<div class="max-w-[360px] mx-auto p-6 bg-[#111] border border-[#222] rounded-xl">
2	<div class="h-7 leading-7 px-3 mb-3 rounded-md bg-[#00FF41] text-[#0A0A0A] text-[11px] font-semibold w-[60px] transition-transform duration-1000 ease-out data-[run]:translate-x-[260px]" id="ease-tw">
3	ease-out
4	</div>
5	<div class="h-7 leading-7 px-3 mb-3 rounded-md bg-[#00FF41] text-[#0A0A0A] text-[11px] font-semibold w-[60px] transition-transform duration-1000 ease-[cubic-bezier(0.34,1.56,0.64,1)] data-[run]:translate-x-[260px]" id="spring-tw">
6	spring
7	</div>
8	<button id="run-tw" class="block mx-auto mt-4 px-4 py-2 rounded-md bg-[#1A1A2E] text-[#E0E0E0] border border-[#2A2A3E]">
9	Run
10	</button>
11	</div>

1	<div class="mx-auto p-4 rounded-3 border border-secondary" style="max-width:360px;background:#111">
2	<div class="ease-ball mb-2" style="width:60px">
3	ease-out
4	</div>
5	<div class="spring-ball mb-2" style="width:60px">
6	spring
7	</div>
8	<button id="run-bs" class="btn btn-dark border-secondary d-block mx-auto mt-3">
9	Run
10	</button>
11	</div>