CSS28 min readCSS Transitions
Learn CSS transitions to make UI feel smooth: how timing works, what properties can be animated, and clean real-world hover effects.
A transition makes a change happen gradually instead of instantly. Without transitions: - UI feels sharp and cheap With transitions: - UI feels professional ## The 4 parts of transition - property (what changes) - duration (how long) - timing function (how it speeds) - delay (optional) ## Example: button hover HTML: ```html <button class="btn">Save</button> ``` CSS: ```css .btn { padding: 10px 14px; border: 1px solid #444; background: white; transition: background 0.2s ease, color 0.2s ease; } .btn:hover { background: #222; color: white; } ``` ## UI imagination Button becomes dark smoothly, text turns white smoothly. ## Common beginner mistake Using transition but changing a property that cannot animate well. Good properties: - opacity - transform - color - background-color ## Graph: instant vs transition ```mermaid flowchart LR A[Hover change] --> B[Instant = harsh] A --> C[Transition = smooth] ``` ## Remember - Use transitions for hover, focus, dropdown feel - Prefer transform and opacity for best performance