Responsive Design, Transitions, and Animations
Media queries
A media query applies CSS only when certain conditions are true, most often, viewport width, letting one stylesheet adapt to phones, tablets, and desktops.
.gallery {
grid-template-columns: 1fr; /* single column by default (mobile) */
}
@media (min-width: 768px) {
.gallery {
grid-template-columns: repeat(3, 1fr); /* three columns on wider screens */
}
}TIP
Writing your base styles for mobile first, then adding min-width media queries for larger screens, tends to produce simpler CSS than starting from desktop and fighting your way down.
Transitions
A transition smoothly animates a property change over time instead of snapping instantly.
.button {
background: #2563eb;
transition: background 0.2s ease, transform 0.2s ease;
}
.button:hover {
background: #1d4ed8;
transform: translateY(-2px);
}transition: property duration easing says which property to animate, how long it takes, and how it accelerates.
Keyframe animations
For anything more complex than a two-state hover effect, use @keyframes:
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
.loading-dot {
animation: pulse 1.2s ease-in-out infinite;
}@keyframes defines named stops along the animation as percentages, then animation on the element says which keyframes to use, how long one cycle takes, and how many times to repeat (infinite for forever).
WARNING
Animating width, height, top, or left forces the browser to recompute layout on every frame and can look janky. Prefer animating transform and opacity, which the browser can run on the GPU without recalculating layout at all.