Master CSS transitions for smooth property changes and enhanced user experience. Learn transition properties, duration, timing functions, and delays.
CSS transitions are the foundation of smooth, engaging web interactions. They transform abrupt property changes into elegant animations that guide user attention and create professional, polished experiences.
While basic hover effects might seem simple, mastering CSS transitions opens the door to sophisticated interaction patterns that enhance usability without requiring JavaScript. Modern web users expect smooth, responsive interfaces, and transitions are your primary tool for delivering that experience.
In this comprehensive lesson, you'll learn to control every aspect of CSS transitions - from basic property changes to complex multi-stage animations. You'll understand timing functions, discover performance optimization techniques, and master the art of creating transitions that feel natural and purposeful.
CSS transitions animate changes between property values over a specified duration. Understanding the four core transition properties gives you complete control over animation behavior.
The Four Core Properties:
1. transition-property
Specifies which CSS properties should be animated.
1/* Animate specific properties */
2.button {
3 transition-property: background-color, transform;
4}
5
6/* Animate all animatable properties */
7.card {
8 transition-property: all;
9}
10
11/* Multiple specific properties */
12.nav-item {
13 transition-property: color, border-bottom-width, opacity;
14}2. transition-duration
Controls how long the transition takes to complete.
1.quick-hover {
2 transition-duration: 0.15s; /* Fast, responsive */
3}
4
5.smooth-fade {
6 transition-duration: 0.5s; /* Standard timing */
7}
8
9.dramatic-entrance {
10 transition-duration: 1.2s; /* Slow, attention-grabbing */
11}3. transition-timing-function
Defines the speed curve of the animation.
1/* Built-in easing functions */
2.ease-in { transition-timing-function: ease-in; }
3.ease-out { transition-timing-function: ease-out; }
4.ease-in-out { transition-timing-function: ease-in-out; }
5.linear { transition-timing-function: linear; }
6
7/* Cubic bezier for custom curves */
8.custom-bounce {
9 transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
10}4. transition-delay
Adds a pause before the transition starts.
1.delayed-reveal {
2 transition-delay: 0.2s; /* Wait 200ms before animating */
3}
4
5/* Staggered animations */
6.item-1 { transition-delay: 0.1s; }
7.item-2 { transition-delay: 0.2s; }
8.item-3 { transition-delay: 0.3s; }Shorthand Syntax:
1/* property duration timing-function delay */
2.complete-transition {
3 transition: all 0.3s ease-in-out 0.1s;
4}
5
6/* Multiple transitions */
7.complex-element {
8 transition:
9 background-color 0.2s ease-out,
10 transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
11 box-shadow 0.2s ease-in-out 0.1s;
12}Best Practices:
Timing functions control the acceleration and deceleration of transitions, making them feel natural and purposeful. The right timing function can make the difference between mechanical and organic motion.
Built-in Timing Functions:
Linear Motion
1.linear {
2 transition-timing-function: linear;
3 /* Constant speed throughout - mechanical feeling */
4}Ease Variants
1/* Default - starts slow, speeds up, then slows down */
2.ease {
3 transition-timing-function: ease;
4}
5
6/* Accelerating start */
7.ease-in {
8 transition-timing-function: ease-in;
9 /* Perfect for exits and dismissals */
10}
11
12/* Decelerating end */
13.ease-out {
14 transition-timing-function: ease-out;
15 /* Great for entrances and appearances */
16}
17
18/* Smooth start and end */
19.ease-in-out {
20 transition-timing-function: ease-in-out;
21 /* Ideal for reversible interactions */
22}Custom Cubic-Bezier Curves:
1/* Bouncy entrance */
2.bounce-in {
3 transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
4}
5
6/* Subtle overshoot */
7.gentle-bounce {
8 transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
9}
10
11/* Sharp deceleration */
12.sharp-stop {
13 transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
14}
15
16/* Material Design standard curve */
17.material {
18 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
19}Steps Function for Discrete Animations:
1/* Jump through discrete values */
2.stepping {
3 transition-timing-function: steps(4, end);
4 /* Creates 4 equal steps */
5}
6
7/* Typewriter effect */
8.typewriter {
9 transition-timing-function: steps(20, end);
10 /* Simulates discrete character appearance */
11}Real-World Applications:
Button Interactions:
1.btn-primary {
2 background-color: #3b82f6;
3 transform: translateY(0);
4 transition:
5 background-color 0.2s ease-out,
6 transform 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
7}
8
9.btn-primary:hover {
10 background-color: #2563eb;
11 transform: translateY(-2px);
12}Modal Appearances:
1.modal {
2 opacity: 0;
3 transform: scale(0.9);
4 transition:
5 opacity 0.3s ease-out,
6 transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
7}
8
9.modal.show {
10 opacity: 1;
11 transform: scale(1);
12}Navigation Highlights:
1.nav-indicator {
2 width: 0;
3 height: 2px;
4 background: #3b82f6;
5 transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
6}
7
8.nav-item:hover .nav-indicator {
9 width: 100%;
10}When to Use Each Function:
Advanced transition techniques allow you to create sophisticated animations that respond intelligently to user interactions and create compelling visual experiences.
Multiple Property Transitions with Staggering:
1.complex-card {
2 background-color: white;
3 transform: translateY(0) scale(1);
4 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
5 border-radius: 8px;
6
7 /* Staggered transitions for layered effect */
8 transition:
9 transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
10 box-shadow 0.3s ease-out 0.1s,
11 background-color 0.2s ease-out 0.05s;
12}
13
14.complex-card:hover {
15 background-color: #f8fafc;
16 transform: translateY(-8px) scale(1.02);
17 box-shadow: 0 20px 25px rgba(0,0,0,0.1);
18}Conditional Transitions:
1/* Different transitions for different directions */
2.slide-panel {
3 transform: translateX(-100%);
4 transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
5}
6
7.slide-panel.slide-in {
8 transform: translateX(0);
9 /* Uses the transition defined above */
10}
11
12.slide-panel.slide-out {
13 transform: translateX(-100%);
14 /* Override with faster exit transition */
15 transition: transform 0.2s ease-in;
16}Transition Grouping and Orchestration:
1.orchestrated-menu {
2 /* Base state */
3 opacity: 0;
4 transform: translateY(-20px);
5 pointer-events: none;
6}
7
8.orchestrated-menu.active {
9 opacity: 1;
10 transform: translateY(0);
11 pointer-events: all;
12
13 transition:
14 opacity 0.2s ease-out,
15 transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
16}
17
18/* Individual menu items with staggered delays */
19.menu-item {
20 opacity: 0;
21 transform: translateX(-30px);
22}
23
24.orchestrated-menu.active .menu-item {
25 opacity: 1;
26 transform: translateX(0);
27 transition: all 0.3s ease-out;
28}
29
30.orchestrated-menu.active .menu-item:nth-child(1) { transition-delay: 0.1s; }
31.orchestrated-menu.active .menu-item:nth-child(2) { transition-delay: 0.2s; }
32.orchestrated-menu.active .menu-item:nth-child(3) { transition-delay: 0.3s; }
33.orchestrated-menu.active .menu-item:nth-child(4) { transition-delay: 0.4s; }Performance-Optimized Transitions:
1/* Promote to separate layer for hardware acceleration */
2.performance-optimized {
3 will-change: transform, opacity;
4 backface-visibility: hidden;
5
6 /* Only animate transform and opacity for 60fps performance */
7 transition:
8 transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
9 opacity 0.2s ease-out;
10}
11
12/* Cleanup will-change after animation */
13.performance-optimized:not(:hover):not(.animating) {
14 will-change: auto;
15}State-Based Transition Control:
1/* Loading states */
2.button {
3 background: #3b82f6;
4 color: white;
5 transition: all 0.2s ease-out;
6}
7
8.button:hover:not(.loading) {
9 background: #2563eb;
10 transform: translateY(-2px);
11}
12
13.button.loading {
14 background: #9ca3af;
15 transform: none;
16 transition: background-color 0.3s ease-out;
17}
18
19/* Error states with different timing */
20.input-field {
21 border: 2px solid #d1d5db;
22 transition: border-color 0.2s ease-out;
23}
24
25.input-field.error {
26 border-color: #ef4444;
27 animation: shake 0.4s ease-in-out;
28 transition: border-color 0.1s ease-out;
29}
30
31@keyframes shake {
32 0%, 100% { transform: translateX(0); }
33 25% { transform: translateX(-5px); }
34 75% { transform: translateX(5px); }
35}Transition Event Handling with CSS:
1/* Chain transitions using pseudo-elements */
2.chained-effect::after {
3 content: '';
4 position: absolute;
5 inset: 0;
6 background: radial-gradient(circle, transparent 0%, rgba(255,255,255,0.3) 100%);
7 opacity: 0;
8 transform: scale(0);
9 transition:
10 opacity 0.2s ease-out,
11 transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
12}
13
14.chained-effect:hover::after {
15 opacity: 1;
16 transform: scale(1);
17 transition-delay: 0.1s; /* Start after main transition */
18}Responsive Transition Strategies:
1/* Reduced motion preferences */
2@media (prefers-reduced-motion: reduce) {
3 .animated-element {
4 transition: none;
5 }
6}
7
8/* Touch device optimizations */
9@media (hover: none) {
10 .hover-only-transition {
11 transition: none;
12 }
13}
14
15/* High refresh rate optimizations */
16@media (min-resolution: 120dpi) {
17 .smooth-animation {
18 transition-duration: 0.2s; /* Shorter for crisp displays */
19 }
20}These advanced techniques allow you to create sophisticated, performance-aware transitions that adapt to user context and device capabilities while maintaining smooth, engaging interactions.
Creating performant transitions requires understanding how the browser renders animations and which properties can be animated efficiently at 60fps.
Hardware-Accelerated Properties (GPU-Friendly):
1/* These properties trigger hardware acceleration */
2.gpu-optimized {
3 /* Transform properties - extremely fast */
4 transform: translateX(100px) translateY(50px) scale(1.2) rotate(45deg);
5
6 /* Opacity changes - very fast */
7 opacity: 0.8;
8
9 /* Filter effects - fast on modern browsers */
10 filter: blur(5px) brightness(1.2);
11
12 /* All animate at 60fps with proper optimization */
13 transition:
14 transform 0.3s ease-out,
15 opacity 0.2s ease-out,
16 filter 0.25s ease-out;
17}Properties That Cause Layout Recalculation (Avoid):
1/* These properties are expensive - avoid animating them */
2.layout-heavy {
3 /* Width/height changes force layout recalculation */
4 width: 200px; /* ❌ Expensive */
5 height: 150px; /* ❌ Expensive */
6
7 /* Use transform: scale() instead */
8 transform: scale(1.5); /* ✅ Fast alternative */
9
10 /* Position changes force layout */
11 top: 50px; /* ❌ Expensive */
12 left: 100px; /* ❌ Expensive */
13
14 /* Use transform: translate() instead */
15 transform: translate(100px, 50px); /* ✅ Fast alternative */
16}Performance Optimization Techniques:
1. will-change Declaration:
1.will-animate {
2 /* Prepare browser for upcoming changes */
3 will-change: transform, opacity;
4
5 /* Remove after animation to free memory */
6}
7
8.will-animate:not(.animating) {
9 will-change: auto; /* Cleanup */
10}2. Layer Promotion:
1.promoted-layer {
2 /* Force promotion to composite layer */
3 transform: translateZ(0); /* or translate3d(0,0,0) */
4 backface-visibility: hidden;
5
6 /* Prevent blurry text on some displays */
7 -webkit-font-smoothing: antialiased;
8}3. Efficient State Management:
1/* Use classes for state changes instead of inline styles */
2.card {
3 transform: translateY(0) scale(1);
4 opacity: 1;
5 transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
6}
7
8.card.lifted {
9 transform: translateY(-10px) scale(1.02);
10 opacity: 0.95;
11}
12
13/* Avoid expensive property calculations during animation */
14.card:not(.disable-transitions) {
15 transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
16}Accessibility Considerations:
1/* Respect user motion preferences */
2@media (prefers-reduced-motion: reduce) {
3 * {
4 animation-duration: 0.01ms !important;
5 animation-iteration-count: 1 !important;
6 transition-duration: 0.01ms !important;
7 }
8}
9
10/* Alternative: Provide subtle alternatives */
11@media (prefers-reduced-motion: reduce) {
12 .bouncy-button {
13 transition: background-color 0.2s ease-out;
14 }
15}
16
17@media (prefers-reduced-motion: no-preference) {
18 .bouncy-button {
19 transition:
20 background-color 0.2s ease-out,
21 transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
22 }
23}Performance Monitoring:
1/* Debug performance with CSS */
2.debug-performance {
3 /* Highlight expensive repaints */
4 outline: 2px solid red;
5 background: rgba(255, 0, 0, 0.1);
6}
7
8/* Use Chrome DevTools Performance tab to monitor:
9 - Frame rate during transitions
10 - Layout thrashing
11 - Paint events
12 - Composite layer creation */Optimized Real-World Examples:
Card Hover Effect:
1.product-card {
2 position: relative;
3 background: white;
4 border-radius: 12px;
5 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
6
7 /* Only animate GPU-friendly properties */
8 transform: translateY(0);
9 transition:
10 transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
11 box-shadow 0.2s ease-out;
12
13 /* Pre-promote for smooth animation */
14 will-change: transform;
15}
16
17.product-card:hover {
18 transform: translateY(-8px);
19 box-shadow: 0 8px 25px rgba(0,0,0,0.15);
20}
21
22.product-card:not(:hover) {
23 will-change: auto; /* Cleanup */
24}Modal Animation:
1.modal-overlay {
2 position: fixed;
3 inset: 0;
4 background: rgba(0,0,0,0.5);
5 opacity: 0;
6
7 /* Fast fade for overlay */
8 transition: opacity 0.2s ease-out;
9}
10
11.modal-content {
12 position: absolute;
13 top: 50%;
14 left: 50%;
15 transform: translate(-50%, -50%) scale(0.9);
16 opacity: 0;
17
18 /* Bouncy entrance for content */
19 transition:
20 opacity 0.2s ease-out,
21 transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
22}
23
24.modal.show .modal-overlay {
25 opacity: 1;
26}
27
28.modal.show .modal-content {
29 opacity: 1;
30 transform: translate(-50%, -50%) scale(1);
31}Best Practices Summary:
A comprehensive demonstration of CSS transitions, timing functions, and performance optimization techniques for creating smooth, engaging user interfaces.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Transitions Fundamentals - Interactive Showcase</title>
7 <style>
8 /* =================
9 RESET & BASE STYLES
10 ================= */
11 * {
12 margin: 0;
13 padding: 0;
14 box-sizing: border-box;
15 }
16
17 body {
18 font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
19 line-height: 1.6;
20 color: #1e293b;
21 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
22 min-height: 100vh;
23 overflow-x: hidden;
24 }
25
26 .container {
27 max-width: 1200px;
28 margin: 0 auto;
29 padding: 2rem;
30 }
31
32 /* =================
33 HEADER ANIMATIONS
34 ================= */
35 .header {
36 text-align: center;
37 margin-bottom: 3rem;
38 transform: translateY(-20px);
39 opacity: 0;
40 animation: slideInFromTop 0.8s ease-out 0.2s forwards;
41 }
42
43 @keyframes slideInFromTop {
44 to {
45 transform: translateY(0);
46 opacity: 1;
47 }
48 }
49
50 .header h1 {
51 font-size: 3.5rem;
52 color: white;
53 margin-bottom: 1rem;
54 text-shadow: 0 2px 4px rgba(0,0,0,0.3);
55 }
56
57 .header p {
58 font-size: 1.25rem;
59 color: rgba(255,255,255,0.9);
60 max-width: 600px;
61 margin: 0 auto;
62 }
63
64 /* =================
65 DEMO SECTIONS
66 ================= */
67 .demo-section {
68 background: rgba(255, 255, 255, 0.95);
69 margin-bottom: 2rem;
70 padding: 2.5rem;
71 border-radius: 20px;
72 box-shadow: 0 8px 32px rgba(0,0,0,0.1);
73 backdrop-filter: blur(10px);
74
75 /* Section entrance animation */
76 transform: translateY(30px);
77 opacity: 0;
78 animation: slideInFromBottom 0.6s ease-out forwards;
79 }
80
81 .demo-section:nth-child(2) { animation-delay: 0.1s; }
82 .demo-section:nth-child(3) { animation-delay: 0.2s; }
83 .demo-section:nth-child(4) { animation-delay: 0.3s; }
84 .demo-section:nth-child(5) { animation-delay: 0.4s; }
85
86 @keyframes slideInFromBottom {
87 to {
88 transform: translateY(0);
89 opacity: 1;
90 }
91 }
92
93 .demo-section h2 {
94 font-size: 2rem;
95 margin-bottom: 1.5rem;
96 color: #2563eb;
97 position: relative;
98 }
99
100 .demo-section h2::after {
101 content: '';
102 position: absolute;
103 bottom: -8px;
104 left: 0;
105 width: 60px;
106 height: 3px;
107 background: linear-gradient(90deg, #3b82f6, #06b6d4);
108 border-radius: 2px;
109
110 /* Animated underline */
111 transform: scaleX(0);
112 transform-origin: left;
113 animation: expandLine 0.5s ease-out 0.5s forwards;
114 }
115
116 @keyframes expandLine {
117 to {
118 transform: scaleX(1);
119 }
120 }
121
122 /* =================
123 BASIC TRANSITIONS
124 ================= */
125 .basic-buttons {
126 display: grid;
127 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
128 gap: 1.5rem;
129 margin-bottom: 2rem;
130 }
131
132 .btn-basic {
133 padding: 1rem 2rem;
134 background: #3b82f6;
135 color: white;
136 border: none;
137 border-radius: 12px;
138 font-size: 1rem;
139 font-weight: 600;
140 cursor: pointer;
141 position: relative;
142 overflow: hidden;
143
144 /* Basic transition - ease-out for natural deceleration */
145 transition:
146 background-color 0.2s ease-out,
147 transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
148 box-shadow 0.2s ease-out;
149 }
150
151 .btn-basic:hover {
152 background: #2563eb;
153 transform: translateY(-3px);
154 box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
155 }
156
157 .btn-basic:active {
158 transform: translateY(-1px);
159 box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
160 }
161
162 /* Ripple effect using pseudo-element */
163 .btn-ripple::after {
164 content: '';
165 position: absolute;
166 top: 50%;
167 left: 50%;
168 width: 0;
169 height: 0;
170 background: rgba(255,255,255,0.3);
171 border-radius: 50%;
172 transform: translate(-50%, -50%);
173 transition: width 0.3s ease-out, height 0.3s ease-out;
174 }
175
176 .btn-ripple:hover::after {
177 width: 200px;
178 height: 200px;
179 }
180
181 /* =================
182 TIMING FUNCTION DEMOS
183 ================= */
184 .timing-demo {
185 display: grid;
186 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
187 gap: 1rem;
188 margin-bottom: 2rem;
189 }
190
191 .timing-ball {
192 width: 60px;
193 height: 60px;
194 background: linear-gradient(135deg, #06b6d4, #3b82f6);
195 border-radius: 50%;
196 margin: 1rem auto;
197 cursor: pointer;
198 position: relative;
199
200 /* Default position */
201 transform: translateX(0);
202 }
203
204 .timing-ball.linear { transition: transform 1s linear; }
205 .timing-ball.ease { transition: transform 1s ease; }
206 .timing-ball.ease-in { transition: transform 1s ease-in; }
207 .timing-ball.ease-out { transition: transform 1s ease-out; }
208 .timing-ball.ease-in-out { transition: transform 1s ease-in-out; }
209 .timing-ball.bounce { transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
210
211 .timing-ball:hover {
212 transform: translateX(80px);
213 }
214
215 .timing-label {
216 text-align: center;
217 font-size: 0.9rem;
218 color: #64748b;
219 margin-bottom: 0.5rem;
220 font-weight: 500;
221 }
222
223 /* =================
224 ADVANCED CARD ANIMATIONS
225 ================= */
226 .card-grid {
227 display: grid;
228 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
229 gap: 2rem;
230 margin-bottom: 2rem;
231 }
232
233 .animated-card {
234 background: white;
235 border-radius: 16px;
236 padding: 2rem;
237 position: relative;
238 cursor: pointer;
239 overflow: hidden;
240
241 /* Multiple properties with different timings */
242 transform: translateY(0) scale(1);
243 box-shadow: 0 4px 15px rgba(0,0,0,0.08);
244
245 transition:
246 transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
247 box-shadow 0.2s ease-out 0.1s;
248 }
249
250 .animated-card::before {
251 content: '';
252 position: absolute;
253 top: 0;
254 left: -100%;
255 width: 100%;
256 height: 100%;
257 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
258 transition: left 0.5s ease-out;
259 }
260
261 .animated-card:hover {
262 transform: translateY(-12px) scale(1.02);
263 box-shadow: 0 20px 40px rgba(0,0,0,0.12);
264 }
265
266 .animated-card:hover::before {
267 left: 100%;
268 }
269
270 .card-icon {
271 width: 60px;
272 height: 60px;
273 background: linear-gradient(135deg, #3b82f6, #06b6d4);
274 border-radius: 12px;
275 display: flex;
276 align-items: center;
277 justify-content: center;
278 color: white;
279 font-size: 1.5rem;
280 margin-bottom: 1rem;
281
282 /* Icon scaling animation */
283 transform: scale(1);
284 transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s;
285 }
286
287 .animated-card:hover .card-icon {
288 transform: scale(1.1);
289 }
290
291 /* =================
292 LOADING ANIMATIONS
293 ================= */
294 .loading-demo {
295 display: flex;
296 justify-content: space-around;
297 align-items: center;
298 padding: 2rem;
299 background: rgba(255,255,255,0.1);
300 border-radius: 12px;
301 margin-bottom: 2rem;
302 }
303
304 .loading-spinner {
305 width: 40px;
306 height: 40px;
307 border: 3px solid rgba(59, 130, 246, 0.3);
308 border-top: 3px solid #3b82f6;
309 border-radius: 50%;
310
311 /* Continuous rotation */
312 animation: spin 1s linear infinite;
313 }
314
315 @keyframes spin {
316 0% { transform: rotate(0deg); }
317 100% { transform: rotate(360deg); }
318 }
319
320 .loading-dots {
321 display: flex;
322 gap: 0.5rem;
323 }
324
325 .dot {
326 width: 12px;
327 height: 12px;
328 background: #3b82f6;
329 border-radius: 50%;
330
331 /* Staggered bounce animation */
332 animation: bounce 1.4s ease-in-out infinite both;
333 }
334
335 .dot:nth-child(1) { animation-delay: -0.32s; }
336 .dot:nth-child(2) { animation-delay: -0.16s; }
337 .dot:nth-child(3) { animation-delay: 0s; }
338
339 @keyframes bounce {
340 0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
341 40% { transform: scale(1.2); opacity: 1; }
342 }
343
344 .progress-bar {
345 width: 200px;
346 height: 4px;
347 background: rgba(59, 130, 246, 0.2);
348 border-radius: 2px;
349 overflow: hidden;
350 position: relative;
351 }
352
353 .progress-bar::after {
354 content: '';
355 position: absolute;
356 top: 0;
357 left: -100%;
358 width: 100%;
359 height: 100%;
360 background: linear-gradient(90deg, #3b82f6, #06b6d4);
361
362 /* Sliding progress animation */
363 animation: progress 2s ease-in-out infinite;
364 }
365
366 @keyframes progress {
367 0% { left: -100%; }
368 50% { left: 0; }
369 100% { left: 100%; }
370 }
371
372 /* =================
373 INTERACTIVE CONTROLS
374 ================= */
375 .controls {
376 text-align: center;
377 margin-bottom: 2rem;
378 }
379
380 .control-btn {
381 margin: 0.5rem;
382 padding: 0.75rem 1.5rem;
383 background: rgba(255,255,255,0.9);
384 border: 2px solid transparent;
385 border-radius: 8px;
386 cursor: pointer;
387 font-weight: 600;
388 color: #1e293b;
389
390 /* Smooth state changes */
391 transition:
392 background-color 0.2s ease-out,
393 border-color 0.2s ease-out,
394 transform 0.15s ease-out;
395 }
396
397 .control-btn:hover {
398 background: white;
399 border-color: #3b82f6;
400 transform: translateY(-2px);
401 }
402
403 .control-btn.active {
404 background: #3b82f6;
405 color: white;
406 transform: translateY(-2px);
407 }
408
409 /* =================
410 PERFORMANCE TIPS
411 ================= */
412 .performance-tip {
413 background: linear-gradient(135deg, #10b981, #059669);
414 color: white;
415 padding: 1.5rem;
416 border-radius: 12px;
417 margin-top: 2rem;
418 }
419
420 .performance-tip h3 {
421 margin-bottom: 1rem;
422 font-size: 1.25rem;
423 }
424
425 .performance-tip ul {
426 list-style: none;
427 padding: 0;
428 }
429
430 .performance-tip li {
431 padding: 0.25rem 0;
432 position: relative;
433 padding-left: 1.5rem;
434 }
435
436 .performance-tip li::before {
437 content: '✓';
438 position: absolute;
439 left: 0;
440 color: #86efac;
441 font-weight: bold;
442 }
443
444 /* =================
445 RESPONSIVE DESIGN
446 ================= */
447 @media (max-width: 768px) {
448 .header h1 {
449 font-size: 2.5rem;
450 }
451
452 .container {
453 padding: 1rem;
454 }
455
456 .demo-section {
457 padding: 1.5rem;
458 }
459
460 .basic-buttons {
461 grid-template-columns: 1fr;
462 }
463
464 .timing-demo {
465 grid-template-columns: repeat(2, 1fr);
466 }
467
468 .card-grid {
469 grid-template-columns: 1fr;
470 }
471 }
472
473 /* =================
474 ACCESSIBILITY
475 ================= */
476 @media (prefers-reduced-motion: reduce) {
477 *,
478 *::before,
479 *::after {
480 animation-duration: 0.01ms !important;
481 animation-iteration-count: 1 !important;
482 transition-duration: 0.01ms !important;
483 }
484 }
485
486 /* Focus styles for keyboard navigation */
487 .btn-basic:focus,
488 .control-btn:focus,
489 .animated-card:focus {
490 outline: 3px solid #93c5fd;
491 outline-offset: 2px;
492 }
493 </style>
494</head>
495<body>
496 <div class="container">
497 <!-- Header -->
498 <header class="header">
499 <h1>⚡ CSS Transitions Mastery</h1>
500 <p>Discover the power of smooth, performance-optimized CSS transitions that create engaging user experiences</p>
501 </header>
502
503 <!-- Basic Transition Buttons -->
504 <section class="demo-section">
505 <h2>🎯 Basic Transition Properties</h2>
506 <p style="margin-bottom: 2rem; color: #64748b;">Hover over these buttons to see different transition properties in action. Each button demonstrates optimized timing and easing functions.</p>
507
508 <div class="basic-buttons">
509 <button class="btn-basic">Smooth Hover</button>
510 <button class="btn-basic btn-ripple">Ripple Effect</button>
511 <button class="btn-basic" style="transition-duration: 0.1s;">Quick Response</button>
512 <button class="btn-basic" style="transition-duration: 0.8s;">Slow & Dramatic</button>
513 </div>
514 </section>
515
516 <!-- Timing Functions Demo -->
517 <section class="demo-section">
518 <h2>⏱️ Timing Functions Showcase</h2>
519 <p style="margin-bottom: 2rem; color: #64748b;">Click or hover over each ball to see how different timing functions affect animation feel and personality.</p>
520
521 <div class="timing-demo">
522 <div>
523 <div class="timing-label">Linear</div>
524 <div class="timing-ball linear"></div>
525 </div>
526 <div>
527 <div class="timing-label">Ease (Default)</div>
528 <div class="timing-ball ease"></div>
529 </div>
530 <div>
531 <div class="timing-label">Ease-In</div>
532 <div class="timing-ball ease-in"></div>
533 </div>
534 <div>
535 <div class="timing-label">Ease-Out</div>
536 <div class="timing-ball ease-out"></div>
537 </div>
538 <div>
539 <div class="timing-label">Ease-In-Out</div>
540 <div class="timing-ball ease-in-out"></div>
541 </div>
542 <div>
543 <div class="timing-label">Bounce</div>
544 <div class="timing-ball bounce"></div>
545 </div>
546 </div>
547 </section>
548
549 <!-- Advanced Card Animations -->
550 <section class="demo-section">
551 <h2>🃏 Advanced Multi-Property Transitions</h2>
552 <p style="margin-bottom: 2rem; color: #64748b;">These cards demonstrate complex transitions combining multiple properties with different timing functions and delays.</p>
553
554 <div class="card-grid">
555 <div class="animated-card" tabindex="0">
556 <div class="card-icon">🚀</div>
557 <h3>Transform & Scale</h3>
558 <p>Combines translateY and scale with cubic-bezier timing for natural motion and subtle size increase.</p>
559 </div>
560 <div class="animated-card" tabindex="0">
561 <div class="card-icon">💡</div>
562 <h3>Staggered Properties</h3>
563 <p>Multiple properties animate with different durations and delays, creating layered effects.</p>
564 </div>
565 <div class="animated-card" tabindex="0">
566 <div class="card-icon">🎨</div>
567 <h3>Shine Effect</h3>
568 <p>Pseudo-element animation combined with card transforms for sophisticated interaction feedback.</p>
569 </div>
570 </div>
571 </section>
572
573 <!-- Loading Animations -->
574 <section class="demo-section">
575 <h2>🔄 Loading State Transitions</h2>
576 <p style="margin-bottom: 2rem; color: #64748b;">Smooth loading indicators using CSS transitions and animations for better user experience during wait times.</p>
577
578 <div class="loading-demo">
579 <div class="loading-spinner"></div>
580 <div class="loading-dots">
581 <div class="dot"></div>
582 <div class="dot"></div>
583 <div class="dot"></div>
584 </div>
585 <div class="progress-bar"></div>
586 </div>
587 </section>
588
589 <!-- Interactive Controls -->
590 <section class="demo-section">
591 <h2>🎮 Interactive Transition Controls</h2>
592 <div class="controls">
593 <button class="control-btn active" onclick="resetAnimations()">Reset All</button>
594 <button class="control-btn" onclick="triggerWave()">Wave Effect</button>
595 <button class="control-btn" onclick="toggleTheme()">Theme Toggle</button>
596 </div>
597 </section>
598
599 <!-- Performance Tips -->
600 <div class="performance-tip">
601 <h3>⚡ Performance Optimization Tips</h3>
602 <ul>
603 <li>Animate only transform, opacity, and filter properties for 60fps performance</li>
604 <li>Use will-change property before complex animations, remove after completion</li>
605 <li>Prefer cubic-bezier() timing functions over JavaScript easing libraries</li>
606 <li>Keep transition durations under 500ms for UI interactions</li>
607 <li>Use hardware acceleration with transform: translateZ(0) when needed</li>
608 <li>Respect user motion preferences with @media (prefers-reduced-motion)</li>
609 </ul>
610 </div>
611 </div>
612
613 <script>
614 // Interactive demonstration functions
615 function resetAnimations() {
616 // Reset all timing balls
617 const balls = document.querySelectorAll('.timing-ball');
618 balls.forEach(ball => {
619 ball.style.transform = 'translateX(0)';
620 setTimeout(() => {
621 ball.style.transform = 'translateX(80px)';
622 }, 100);
623 });
624
625 // Update button state
626 updateActiveButton(event.target);
627 }
628
629 function triggerWave() {
630 const cards = document.querySelectorAll('.animated-card');
631 cards.forEach((card, index) => {
632 setTimeout(() => {
633 card.style.transform = 'translateY(-20px) scale(1.05)';
634 card.style.boxShadow = '0 25px 50px rgba(0,0,0,0.15)';
635
636 setTimeout(() => {
637 card.style.transform = 'translateY(0) scale(1)';
638 card.style.boxShadow = '0 4px 15px rgba(0,0,0,0.08)';
639 }, 300);
640 }, index * 100);
641 });
642
643 updateActiveButton(event.target);
644 }
645
646 function toggleTheme() {
647 const body = document.body;
648 const isDark = body.classList.contains('dark-theme');
649
650 body.style.transition = 'background 0.5s ease-in-out, color 0.3s ease-out';
651
652 if (isDark) {
653 body.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
654 body.classList.remove('dark-theme');
655 } else {
656 body.style.background = 'linear-gradient(135deg, #1e293b 0%, #334155 100%)';
657 body.classList.add('dark-theme');
658 }
659
660 updateActiveButton(event.target);
661 }
662
663 function updateActiveButton(clickedBtn) {
664 document.querySelectorAll('.control-btn').forEach(btn => {
665 btn.classList.remove('active');
666 });
667 clickedBtn.classList.add('active');
668 }
669
670 // Auto-trigger timing function demo on load
671 window.addEventListener('load', () => {
672 setTimeout(() => {
673 const balls = document.querySelectorAll('.timing-ball');
674 balls.forEach((ball, index) => {
675 setTimeout(() => {
676 ball.style.transform = 'translateX(80px)';
677 setTimeout(() => {
678 ball.style.transform = 'translateX(0)';
679 }, 1000);
680 }, index * 200);
681 });
682 }, 2000);
683 });
684
685 // Add click functionality to timing balls
686 document.querySelectorAll('.timing-ball').forEach(ball => {
687 ball.addEventListener('click', () => {
688 const isActive = ball.style.transform === 'translateX(80px)';
689 ball.style.transform = isActive ? 'translateX(0)' : 'translateX(80px)';
690 });
691 });
692
693 console.log('🎯 CSS Transitions Fundamentals loaded! Hover, click, and explore all the interactive examples.');
694 </script>
695</body>
696</html>This comprehensive demonstration showcases every aspect of CSS Transitions Fundamentals covered in Lesson 1:
⚡ Complete Transition Property Coverage:
1. Basic Transition Properties:
2. Timing Functions - Visual Comparison:
3. Advanced Multi-Property Transitions:
4. Real-World Applications:
Button Interactions:
Card Hover Effects:
Loading State Animations:
5. Performance Optimization Techniques:
6. Accessibility & Responsive Design:
7. Interactive Features:
8. Development Best Practices:
9. Advanced Techniques Demonstrated:
This showcase serves as both a comprehensive learning tool and practical reference, demonstrating how CSS transitions create smooth, engaging user experiences while maintaining optimal performance and accessibility standards.
Excellent work mastering CSS transitions! You now understand how to create smooth, performance-optimized animations that enhance user experience. Next, we'll dive into "Transform Properties & 3D Effects" where you'll learn to create impressive visual transformations, work with 3D space, and build eye-catching effects that add depth and dimension to your designs. Get ready to take your animations to the next level!
Your progress is saved in this browser, on this device only.