Beginner LevelCSS & Modern Layouts
How do CSS transitions create smooth property changes?
❓ Interview Prompt: Explain the transition shorthand, timing functions, and which properties can be transitioned.
CSS transition animates property changes smoothly over a duration instead of instantly snapping:
Shorthand:
transition: property duration timing-function delay;
Timing Functions:
•
ease (default): Starts slow, speeds up, ends slow.•
ease-in-out: Slow start and end.•
linear: Constant speed.•
cubic-bezier(x1,y1,x2,y2): Custom acceleration curve.Animatable Properties:
Not all CSS properties can be transitioned. Animatable: opacity, transform, color, background-color, width, height, box-shadow.
Not animatable: display, font-family, position.
Code Implementation Example
css
.btn {
background: #3d2c2e;
color: #f5edf0;
transform: translateY(0);
transition: background 0.2s ease, transform 0.15s ease;
}
.btn:hover {
background: #886f68;
transform: translateY(-2px);
}
/* Prefer transform/opacity for 60fps performance */
.fade-in {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.fade-in.visible { opacity: 1; }💡Button hover transitions and opacity fade-in using performant properties.
🎯 Interview Key Takeaway
Only animate transform and opacity for 60fps performance — they run on the GPU compositor thread.
#Transitions#Animation#Performance#Beginner
Back to all CSS & Modern Layouts Questions→