Animations.
The details that make sites feel polished.

/* The transition property — set once, applies to any changes */
.button {
background: #1572B6;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 600;

/* Transition all changes in 0.2s with ease timing */
transition: background-color 0.2s ease, transform 0.2s ease;
}

/* On hover, change the value — transition animates it */
.button:hover {
background: #33A9DC;
transform: translateY(-2px);
}

/* On click, move back down */
.button:active {
transform: translateY(0);
}

/* Multiple properties with different durations */
.card {
background: #1e293b;
padding: 24px;
border-radius: 12px;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.2s ease;
}

.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* The transition doesn't exist on :hover — it's on the base state.
That way, leaving hover also animates back smoothly. */

/* The five built-in timing functions /
.ease { transition: transform 1s ease; } / default — slow, fast, slow /
.ease-in { transition: transform 1s ease-in; } / slow start, accelerate /
.ease-out { transition: transform 1s ease-out; } / fast start, slow end /
.ease-in-out { transition: transform 1s ease-in-out; } / slow at both ends /
.linear { transition: transform 1s linear; } / constant speed */

/* cubic-bezier — custom curves for fine control /
.snappy {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
/ Material Design's standard "ease-out" curve */
}

.bouncy {
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Overshoots the target then settles — feels playful */
}

.smooth {
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
/* Very smooth — used by Stripe and Vercel */
}

/* Hover to animate */
.box {
width: 100px;
height: 100px;
background: #1572B6;
border-radius: 8px;
cursor: pointer;
}
.box:hover {
transform: translateX(200px);
}

/* translate(x, y) — move without affecting layout /
.translate {
transform: translate(20px, 10px);
/ Same as translateX(20px) translateY(10px) */
}

/* The centering trick — the classic use /
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/ Because translate moves by the element's OWN width/height */
}

/* scale(n) — grow or shrink /
.scale-up {
transform: scale(1.1); / 10% larger /
}
.scale-down {
transform: scale(0.9); / 10% smaller */
}

/* rotate(deg) — rotate around center */
.rotate {
transform: rotate(45deg);
}

/* Multiple transforms — space-separated, applied in order /
.combined {
transform: translate(-50%, -50%) rotate(15deg) scale(1.2);
/ Applied left to right */
}

/* transform-origin — where transforms pivot from /
.rotate-top-left {
transform: rotate(45deg);
transform-origin: top left;
/ Default is center; this rotates from top-left */
}

/* The hover-lift pattern — the most common card effect */
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* The @keyframes rule — define the animation */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* Multi-step — percentages are the "frames" */
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}

/* Fade in with slide — the entrance animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Pulse — for loading or attention effects */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

/* Shimmer — for skeleton loaders */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}

/* Apply the animation */
.spinner {
width: 40px;
height: 40px;
border: 4px solid #334155;
border-top-color: #1572B6;
border-radius: 50%;
animation: spin 1s linear infinite;
}

.bouncy-ball {
width: 30px;
height: 30px;
background: #1572B6;
border-radius: 50%;
animation: bounce 1s ease-in-out infinite;
}

.fade-in {
animation: fadeInUp 0.6s ease-out forwards;
/* forwards = keep the final state after animation ends */
}

.pulsing {
animation: pulse 2s ease-in-out infinite;
}

/* Multiple animations on one element /
.multi {
animation:
fadeInUp 0.6s ease-out forwards,
pulse 3s ease-in-out 0.6s infinite;
/ Second animation starts after the first (delay 0.6s) */
}

/* 1. BUTTON HOVER — the most common animation */
.btn {
background: #1572B6;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn:hover {
background: #33A9DC;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(21, 114, 182, 0.4);
}
.btn:active {
transform: translateY(0);
}

/* 2. CARD LIFT — the hover effect on cards */
.card {
background: #1e293b;
border-radius: 12px;
padding: 24px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* 3. LOADING SPINNER — the most-used keyframe animation */
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255,255,255,0.2);
border-top-color: #1572B6;
border-radius: 50%;
animation: spin 1s linear infinite;
}

/* 4. FADE IN UP — page entrance animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-in {
animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 5. SKELETON LOADER — shimmer effect for loading states */
@keyframes shimmer {
0% { background-position: -468px 0; }
100% { background-position: 468px 0; }
}
.skeleton {
background: linear-gradient(
90deg,
#1e293b 0%,
#334155 50%,
#1e293b 100%
);
background-size: 936px 100%;
animation: shimmer 1.5s linear infinite;
border-radius: 6px;
}

/* The pattern: only animate if user hasn't requested reduced motion */
@media (prefers-reduced-motion: no-preference) {
.animated-element {
animation: bounce 1s ease infinite;
}
.transitions {
transition: transform 0.3s ease;
}
}

/* The alternative: disable animations for users who requested it */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

/* The universal approach — use this in every project */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

/* For essential animations (loading spinner), keep but reduce /
@media (prefers-reduced-motion: reduce) {
.spinner {
animation-duration: 2s; / slow it down */
}
}

/* Why this matters:
• Vestibular disorders (dizziness, vertigo, nausea) affect ~35% of adults over 40
• Large moving backgrounds, parallax scrolling, and infinite animations
can trigger symptoms
• Users who set "Reduce motion" in their OS are telling you
they need this
• WCAG 2.1 AA requires respecting this setting
• It costs 6 lines of CSS
*/