Master CSS transitions and keyframe animations to add smooth, engaging motion to your designs. Learn timing, transforms, and performance optimization.
CSS animations bring static designs to life by adding smooth, purposeful motion that guides user attention, provides feedback, and creates engaging experiences. Unlike jarring instant changes, animations create natural transitions that feel intuitive and polished.
Animations serve both functional and aesthetic purposes: they can indicate state changes, guide user focus, provide loading feedback, and create delightful micro-interactions. When used thoughtfully, animations enhance usability and create memorable brand experiences.
This lesson will give you complete mastery over CSS transitions and animations, from basic property transitions to complex keyframe sequences, transform functions, and performance optimization techniques that ensure smooth animations across all devices.
CSS transitions provide smooth changes between property values over a specified duration, creating natural motion effects.
Basic Transition Syntax:
1.element {
2 transition: property duration timing-function delay;
3 /* Or individual properties: */
4 transition-property: all;
5 transition-duration: 0.3s;
6 transition-timing-function: ease;
7 transition-delay: 0s;
8}
9
10/* Multiple transitions */
11.multi-transition {
12 transition:
13 transform 0.3s ease,
14 opacity 0.2s ease-in 0.1s,
15 background-color 0.4s ease-out;
16}Common Transition Properties:
1/* Color transitions */
2.button {
3 background-color: #3b82f6;
4 color: white;
5 transition: background-color 0.3s ease;
6}
7
8.button:hover {
9 background-color: #1e40af;
10}
11
12/* Size transitions */
13.card {
14 transform: scale(1);
15 transition: transform 0.2s ease;
16}
17
18.card:hover {
19 transform: scale(1.05);
20}
21
22/* Opacity transitions */
23.fade-element {
24 opacity: 1;
25 transition: opacity 0.4s ease;
26}
27
28.fade-element:hover {
29 opacity: 0.7;
30}
31
32/* Position transitions */
33.slide-element {
34 transform: translateX(0);
35 transition: transform 0.3s ease;
36}
37
38.slide-element:hover {
39 transform: translateX(20px);
40}Timing Functions for Natural Motion:
1/* Built-in timing functions */
2.ease { transition-timing-function: ease; } /* Default */
3.linear { transition-timing-function: linear; } /* Constant speed */
4.ease-in { transition-timing-function: ease-in; } /* Slow start */
5.ease-out { transition-timing-function: ease-out; } /* Slow end */
6.ease-in-out { transition-timing-function: ease-in-out; } /* Slow start and end */
7
8/* Custom cubic-bezier curves */
9.bounce-out {
10 transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
11}
12
13.smooth-motion {
14 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
15}
16
17/* Step functions for discrete changes */
18.stepped {
19 transition-timing-function: steps(5, end);
20}Advanced Transition Techniques:
1/* Transition different properties with different timings */
2.complex-transition {
3 transition:
4 transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
5 box-shadow 0.2s ease,
6 background-color 0.4s ease 0.1s;
7}
8
9.complex-transition:hover {
10 transform: translateY(-4px) scale(1.02);
11 box-shadow: 0 12px 40px rgba(0,0,0,0.15);
12 background-color: #f8fafc;
13}
14
15/* Transition groups */
16.nav-item {
17 position: relative;
18 transition: color 0.3s ease;
19}
20
21.nav-item::after {
22 content: '';
23 position: absolute;
24 bottom: 0;
25 left: 0;
26 width: 0;
27 height: 2px;
28 background: #3b82f6;
29 transition: width 0.3s ease;
30}
31
32.nav-item:hover::after {
33 width: 100%;
34}
35
36/* Form input transitions */
37.input-field {
38 border: 2px solid #e5e7eb;
39 padding: 12px;
40 transition: all 0.2s ease;
41}
42
43.input-field:focus {
44 border-color: #3b82f6;
45 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
46 outline: none;
47}Keyframe animations provide precise control over complex animation sequences with multiple stages and properties.
Basic Keyframe Animation:
1/* Define the animation */
2@keyframes fadeIn {
3 from {
4 opacity: 0;
5 transform: translateY(20px);
6 }
7 to {
8 opacity: 1;
9 transform: translateY(0);
10 }
11}
12
13/* Apply the animation */
14.fade-in-element {
15 animation: fadeIn 0.6s ease-out;
16}
17
18/* Multiple keyframe points */
19@keyframes bounce {
20 0% {
21 transform: translateY(0);
22 }
23 50% {
24 transform: translateY(-30px);
25 }
26 100% {
27 transform: translateY(0);
28 }
29}
30
31.bouncing-element {
32 animation: bounce 1s ease-in-out infinite;
33}Animation Properties:
1.animated-element {
2 animation-name: slideIn;
3 animation-duration: 0.8s;
4 animation-timing-function: ease-out;
5 animation-delay: 0.2s;
6 animation-iteration-count: 1;
7 animation-direction: normal;
8 animation-fill-mode: forwards;
9 animation-play-state: running;
10
11 /* Shorthand */
12 animation: slideIn 0.8s ease-out 0.2s 1 normal forwards running;
13}
14
15/* Animation iteration options */
16.infinite-animation {
17 animation-iteration-count: infinite;
18}
19
20.three-times {
21 animation-iteration-count: 3;
22}
23
24/* Animation direction options */
25.reverse-animation {
26 animation-direction: reverse; /* Backwards */
27}
28
29.alternate-animation {
30 animation-direction: alternate; /* Forward then reverse */
31}
32
33.alternate-reverse {
34 animation-direction: alternate-reverse; /* Reverse then forward */
35}
36
37/* Fill mode options */
38.fill-forwards {
39 animation-fill-mode: forwards; /* Keep end state */
40}
41
42.fill-backwards {
43 animation-fill-mode: backwards; /* Apply start state during delay */
44}
45
46.fill-both {
47 animation-fill-mode: both; /* Apply both forwards and backwards */
48}Complex Animation Sequences:
1@keyframes complexLoader {
2 0% {
3 transform: rotate(0deg) scale(1);
4 opacity: 1;
5 border-radius: 0;
6 }
7 25% {
8 transform: rotate(90deg) scale(1.2);
9 border-radius: 25%;
10 }
11 50% {
12 transform: rotate(180deg) scale(0.8);
13 opacity: 0.7;
14 border-radius: 50%;
15 }
16 75% {
17 transform: rotate(270deg) scale(1.1);
18 border-radius: 25%;
19 }
20 100% {
21 transform: rotate(360deg) scale(1);
22 opacity: 1;
23 border-radius: 0;
24 }
25}
26
27.complex-loader {
28 width: 50px;
29 height: 50px;
30 background: linear-gradient(45deg, #3b82f6, #8b5cf6);
31 animation: complexLoader 2s ease-in-out infinite;
32}
33
34/* Staggered animations */
35.stagger-item {
36 animation: fadeInUp 0.6s ease-out forwards;
37 opacity: 0;
38}
39
40.stagger-item:nth-child(1) { animation-delay: 0.1s; }
41.stagger-item:nth-child(2) { animation-delay: 0.2s; }
42.stagger-item:nth-child(3) { animation-delay: 0.3s; }
43.stagger-item:nth-child(4) { animation-delay: 0.4s; }
44
45@keyframes fadeInUp {
46 from {
47 opacity: 0;
48 transform: translateY(30px);
49 }
50 to {
51 opacity: 1;
52 transform: translateY(0);
53 }
54}Animation States and Control:
1/* Pause on hover */
2.pausable-animation {
3 animation: rotate 2s linear infinite;
4}
5
6.pausable-animation:hover {
7 animation-play-state: paused;
8}
9
10/* Conditional animations */
11.trigger-animation {
12 transform: translateX(-100px);
13 opacity: 0;
14 transition: all 0.3s ease;
15}
16
17.trigger-animation.active {
18 animation: slideInFromLeft 0.6s ease-out forwards;
19}
20
21@keyframes slideInFromLeft {
22 to {
23 transform: translateX(0);
24 opacity: 1;
25 }
26}
27
28/* Loading state animations */
29@keyframes pulse {
30 0%, 100% {
31 opacity: 1;
32 }
33 50% {
34 opacity: 0.3;
35 }
36}
37
38.loading {
39 animation: pulse 1.5s ease-in-out infinite;
40}
41
42.skeleton-loader {
43 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
44 background-size: 200% 100%;
45 animation: shimmer 1.5s infinite;
46}
47
48@keyframes shimmer {
49 0% {
50 background-position: -200% 0;
51 }
52 100% {
53 background-position: 200% 0;
54 }
55}Transform functions provide hardware-accelerated animation properties that create smooth motion without affecting document flow.
2D Transform Functions:
1/* Translation (movement) */
2.translate-x { transform: translateX(50px); }
3.translate-y { transform: translateY(-30px); }
4.translate-xy { transform: translate(20px, -15px); }
5
6/* Scaling */
7.scale-up { transform: scale(1.2); }
8.scale-x { transform: scaleX(1.5); }
9.scale-y { transform: scaleY(0.8); }
10.scale-xy { transform: scale(1.2, 0.9); }
11
12/* Rotation */
13.rotate { transform: rotate(45deg); }
14.rotate-negative { transform: rotate(-30deg); }
15
16/* Skewing */
17.skew-x { transform: skewX(15deg); }
18.skew-y { transform: skewY(-10deg); }
19.skew-xy { transform: skew(10deg, 5deg); }
20
21/* Combining transforms */
22.complex-transform {
23 transform: translate(50px, -20px) rotate(30deg) scale(1.1);
24}3D Transform Functions:
1/* 3D translations */
2.translate-z { transform: translateZ(50px); }
3.translate-3d { transform: translate3d(10px, 20px, 30px); }
4
5/* 3D rotations */
6.rotate-x { transform: rotateX(45deg); }
7.rotate-y { transform: rotateY(60deg); }
8.rotate-z { transform: rotateZ(30deg); }
9.rotate-3d { transform: rotate3d(1, 1, 0, 45deg); }
10
11/* 3D scaling */
12.scale-z { transform: scaleZ(2); }
13.scale-3d { transform: scale3d(1.2, 1.5, 0.8); }
14
15/* 3D perspective */
16.perspective-container {
17 perspective: 1000px;
18 perspective-origin: center center;
19}
20
21.flip-card {
22 transform-style: preserve-3d;
23 transition: transform 0.6s ease;
24}
25
26.flip-card:hover {
27 transform: rotateY(180deg);
28}
29
30.flip-card-front,
31.flip-card-back {
32 backface-visibility: hidden;
33 position: absolute;
34 top: 0;
35 left: 0;
36}
37
38.flip-card-back {
39 transform: rotateY(180deg);
40}Transform Origin:
1/* Change the point of transformation */
2.transform-origin-center { transform-origin: center; } /* Default */
3.transform-origin-top { transform-origin: top; }
4.transform-origin-bottom { transform-origin: bottom; }
5.transform-origin-left { transform-origin: left; }
6.transform-origin-right { transform-origin: right; }
7.transform-origin-custom { transform-origin: 25% 75%; }
8
9/* Rotation around different points */
10.rotate-around-corner {
11 transform-origin: top left;
12 transform: rotate(45deg);
13}
14
15.scale-from-center {
16 transform-origin: center;
17 transform: scale(1.5);
18}
19
20/* Animated transform origin */
21@keyframes spinningSquare {
22 0% {
23 transform: rotate(0deg);
24 transform-origin: center;
25 }
26 25% {
27 transform: rotate(90deg);
28 transform-origin: top right;
29 }
30 50% {
31 transform: rotate(180deg);
32 transform-origin: bottom right;
33 }
34 75% {
35 transform: rotate(270deg);
36 transform-origin: bottom left;
37 }
38 100% {
39 transform: rotate(360deg);
40 transform-origin: center;
41 }
42}Performance Optimization:
1/* Hardware acceleration triggers */
2.gpu-accelerated {
3 transform: translateZ(0); /* Force GPU layer */
4 /* or */
5 will-change: transform; /* Hint to browser */
6}
7
8/* Optimize for animations */
9.optimized-animation {
10 /* Use transform instead of changing position */
11 transform: translateX(100px);
12 /* Not: left: 100px; */
13
14 /* Use opacity instead of visibility */
15 opacity: 0;
16 /* Not: visibility: hidden; */
17
18 /* Use scale instead of width/height */
19 transform: scale(1.1);
20 /* Not: width: 110%; height: 110%; */
21}
22
23/* Clean up after animations */
24.animation-finished {
25 will-change: auto; /* Remove optimization hint */
26}
27
28/* Smooth animation curves */
29.smooth-transform {
30 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
31}
32
33/* Efficient loading animations */
34@keyframes efficientSpin {
35 to {
36 transform: rotate(360deg);
37 }
38}
39
40.spinner {
41 animation: efficientSpin 1s linear infinite;
42 will-change: transform;
43}
44
45/* Matrix transforms for complex animations */
46.matrix-transform {
47 /* transform: matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) */
48 transform: matrix(1.2, 0.3, -0.3, 1.2, 50, 100);
49}
50
51.matrix-3d-transform {
52 /* 3D matrix transform */
53 transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1);
54}Optimize animations for smooth performance and respect user preferences for an inclusive experience.
Performance Best Practices:
1/* Prefer transform and opacity */
2.performant-animation {
3 /* Good: Uses GPU-accelerated properties */
4 transition: transform 0.3s ease, opacity 0.3s ease;
5}
6
7.performant-animation:hover {
8 transform: scale(1.1) translateY(-5px);
9 opacity: 0.9;
10}
11
12/* Avoid animating expensive properties */
13.expensive-animation {
14 /* Avoid: These trigger layout/paint */
15 /* transition: width 0.3s, height 0.3s, left 0.3s; */
16
17 /* Better: Use transform instead */
18 transition: transform 0.3s ease;
19}
20
21/* Will-change optimization */
22.will-change-element {
23 will-change: transform; /* Before animation starts */
24}
25
26.will-change-element.animating {
27 animation: slideIn 0.5s ease-out;
28}
29
30.will-change-element.animation-complete {
31 will-change: auto; /* Clean up after animation */
32}Accessibility Considerations:
1/* Respect user preferences */
2@media (prefers-reduced-motion: reduce) {
3 /* Disable animations for sensitive users */
4 *,
5 *::before,
6 *::after {
7 animation-duration: 0.01ms !important;
8 animation-iteration-count: 1 !important;
9 transition-duration: 0.01ms !important;
10 scroll-behavior: auto !important;
11 }
12}
13
14/* Provide alternative feedback */
15@media (prefers-reduced-motion: reduce) {
16 .button {
17 /* Instead of scaling animation */
18 transition: background-color 0.1s ease;
19 }
20
21 .button:hover {
22 background-color: #2563eb;
23 /* Remove transform animation */
24 }
25}
26
27@media (prefers-reduced-motion: no-preference) {
28 .button {
29 transition:
30 background-color 0.3s ease,
31 transform 0.2s ease;
32 }
33
34 .button:hover {
35 background-color: #2563eb;
36 transform: scale(1.05);
37 }
38}Responsive Animation Systems:
1/* Scale animations with viewport */
2.responsive-animation {
3 animation-duration: calc(0.3s + 0.2 * (100vw - 320px) / (1200 - 320));
4}
5
6/* Disable complex animations on small screens */
7@media (max-width: 768px) {
8 .complex-animation {
9 animation: none;
10 transition: opacity 0.2s ease;
11 }
12}
13
14/* Battery and performance considerations */
15@media (prefers-reduced-motion: no-preference) {
16 .energy-efficient {
17 animation: gentlePulse 3s ease-in-out infinite;
18 }
19}
20
21@keyframes gentlePulse {
22 0%, 100% { opacity: 0.8; }
23 50% { opacity: 1; }
24}
25
26/* Connection-aware animations */
27.slow-connection {
28 /* Simplified animations for slow connections */
29 transition: opacity 0.1s ease;
30}
31
32.fast-connection {
33 /* Full animations for fast connections */
34 transition:
35 transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
36 opacity 0.3s ease,
37 box-shadow 0.2s ease;
38}Animation Debugging and Testing:
1/* Debug animation timing */
2.debug-animation {
3 /* Slow down for debugging */
4 animation-duration: 10s !important;
5}
6
7/* Highlight animated elements */
8.debug-animated {
9 outline: 2px solid red;
10 background: rgba(255, 0, 0, 0.1);
11}
12
13/* Performance monitoring hooks */
14.performance-test {
15 will-change: transform;
16}
17
18.performance-test::before {
19 content: '';
20 position: absolute;
21 inset: 0;
22 background: transparent;
23 transition: background-color 5s ease;
24}
25
26/* Animation state classes */
27.animation-ready {
28 /* Initial state */
29 opacity: 0;
30 transform: translateY(20px);
31}
32
33.animation-running {
34 /* During animation */
35 animation: slideInUp 0.6s ease-out forwards;
36}
37
38.animation-complete {
39 /* Final state */
40 opacity: 1;
41 transform: translateY(0);
42 will-change: auto;
43}
44
45/* Loading state management */
46.is-loading {
47 pointer-events: none;
48 animation: pulse 1s ease-in-out infinite;
49}
50
51.is-loaded {
52 animation: none;
53 pointer-events: auto;
54}A comprehensive demonstration of CSS transitions, keyframe animations, transforms, and performance-optimized motion effects.
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 Animations & Transitions Mastery</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
16 line-height: 1.6;
17 color: #1e293b;
18 background: #f8fafc;
19 overflow-x: hidden;
20 }
21
22 /* Respect user motion preferences */
23 @media (prefers-reduced-motion: reduce) {
24 *,
25 *::before,
26 *::after {
27 animation-duration: 0.01ms !important;
28 animation-iteration-count: 1 !important;
29 transition-duration: 0.01ms !important;
30 }
31 }
32
33 .container {
34 max-width: 1200px;
35 margin: 0 auto;
36 padding: 0 2rem;
37 }
38
39 /* Header with animated navigation */
40 .header {
41 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
42 color: white;
43 padding: 1rem 0;
44 position: sticky;
45 top: 0;
46 z-index: 1000;
47 box-shadow: 0 2px 10px rgba(0,0,0,0.2);
48 }
49
50 .nav {
51 display: flex;
52 justify-content: space-between;
53 align-items: center;
54 }
55
56 .nav-brand {
57 font-size: 1.5rem;
58 font-weight: bold;
59 text-decoration: none;
60 color: white;
61 transition: transform 0.3s ease;
62 }
63
64 .nav-brand:hover {
65 transform: scale(1.1);
66 }
67
68 .nav-menu {
69 display: flex;
70 gap: 2rem;
71 list-style: none;
72 }
73
74 .nav-item {
75 position: relative;
76 }
77
78 .nav-link {
79 color: white;
80 text-decoration: none;
81 padding: 0.5rem 1rem;
82 border-radius: 20px;
83 transition: all 0.3s ease;
84 display: block;
85 }
86
87 .nav-link::before {
88 content: '';
89 position: absolute;
90 top: 0;
91 left: 0;
92 right: 0;
93 bottom: 0;
94 background: rgba(255,255,255,0.2);
95 border-radius: 20px;
96 transform: scale(0);
97 transition: transform 0.3s ease;
98 }
99
100 .nav-link:hover::before {
101 transform: scale(1);
102 }
103
104 .nav-link:hover {
105 transform: translateY(-2px);
106 }
107
108 /* Hero section with animated elements */
109 .hero {
110 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
111 color: white;
112 padding: 6rem 0;
113 text-align: center;
114 position: relative;
115 overflow: hidden;
116 }
117
118 .hero::before {
119 content: '';
120 position: absolute;
121 top: -50%;
122 left: -50%;
123 width: 200%;
124 height: 200%;
125 background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
126 animation: rotate 20s linear infinite;
127 }
128
129 @keyframes rotate {
130 to { transform: rotate(360deg); }
131 }
132
133 .hero-content {
134 position: relative;
135 z-index: 2;
136 }
137
138 .hero h1 {
139 font-size: clamp(2.5rem, 5vw, 4rem);
140 margin-bottom: 1rem;
141 opacity: 0;
142 animation: fadeInUp 1s ease-out 0.3s forwards;
143 }
144
145 .hero p {
146 font-size: 1.2rem;
147 margin-bottom: 2rem;
148 max-width: 600px;
149 margin-left: auto;
150 margin-right: auto;
151 opacity: 0;
152 animation: fadeInUp 1s ease-out 0.6s forwards;
153 }
154
155 @keyframes fadeInUp {
156 from {
157 opacity: 0;
158 transform: translateY(30px);
159 }
160 to {
161 opacity: 1;
162 transform: translateY(0);
163 }
164 }
165
166 /* Section styling */
167 .section {
168 padding: 4rem 0;
169 }
170
171 .section-title {
172 font-size: 2.5rem;
173 text-align: center;
174 margin-bottom: 3rem;
175 color: #1e293b;
176 position: relative;
177 }
178
179 .section-title::after {
180 content: '';
181 position: absolute;
182 bottom: -10px;
183 left: 50%;
184 width: 0;
185 height: 4px;
186 background: linear-gradient(90deg, #3b82f6, #8b5cf6);
187 border-radius: 2px;
188 transition: all 0.6s ease;
189 transform: translateX(-50%);
190 }
191
192 .section-title.visible::after {
193 width: 80px;
194 }
195
196 /* Button animations */
197 .btn {
198 display: inline-flex;
199 align-items: center;
200 justify-content: center;
201 padding: 1rem 2rem;
202 background: #3b82f6;
203 color: white;
204 text-decoration: none;
205 border-radius: 50px;
206 font-weight: 600;
207 position: relative;
208 overflow: hidden;
209 transition: all 0.3s ease;
210 border: none;
211 cursor: pointer;
212 margin: 0.5rem;
213 }
214
215 .btn::before {
216 content: '';
217 position: absolute;
218 top: 50%;
219 left: 50%;
220 width: 0;
221 height: 0;
222 background: rgba(255,255,255,0.2);
223 border-radius: 50%;
224 transition: all 0.6s ease;
225 transform: translate(-50%, -50%);
226 }
227
228 .btn:hover {
229 transform: translateY(-3px);
230 box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
231 }
232
233 .btn:hover::before {
234 width: 300px;
235 height: 300px;
236 }
237
238 .btn:active {
239 transform: translateY(-1px);
240 }
241
242 /* Card animations */
243 .card-grid {
244 display: grid;
245 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
246 gap: 2rem;
247 margin: 2rem 0;
248 }
249
250 .card {
251 background: white;
252 border-radius: 16px;
253 padding: 2rem;
254 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
255 transition: all 0.3s ease;
256 position: relative;
257 overflow: hidden;
258 }
259
260 .card::before {
261 content: '';
262 position: absolute;
263 top: 0;
264 left: -100%;
265 width: 100%;
266 height: 100%;
267 background: linear-gradient(
268 90deg,
269 transparent,
270 rgba(255,255,255,0.4),
271 transparent
272 );
273 transition: left 0.5s ease;
274 }
275
276 .card:hover {
277 transform: translateY(-8px) scale(1.02);
278 box-shadow: 0 20px 40px rgba(0,0,0,0.15);
279 }
280
281 .card:hover::before {
282 left: 100%;
283 }
284
285 .card-icon {
286 width: 60px;
287 height: 60px;
288 border-radius: 12px;
289 display: flex;
290 align-items: center;
291 justify-content: center;
292 font-size: 1.5rem;
293 color: white;
294 margin-bottom: 1rem;
295 transition: all 0.4s ease;
296 }
297
298 .card:hover .card-icon {
299 transform: rotateY(180deg) scale(1.1);
300 }
301
302 /* Loading animations */
303 .loader-section {
304 display: grid;
305 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
306 gap: 2rem;
307 margin: 2rem 0;
308 }
309
310 .loader-card {
311 background: white;
312 border-radius: 12px;
313 padding: 2rem;
314 text-align: center;
315 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
316 }
317
318 /* Spinner loader */
319 .spinner {
320 width: 40px;
321 height: 40px;
322 border: 4px solid #e5e7eb;
323 border-top-color: #3b82f6;
324 border-radius: 50%;
325 animation: spin 1s linear infinite;
326 margin: 0 auto 1rem;
327 }
328
329 @keyframes spin {
330 to { transform: rotate(360deg); }
331 }
332
333 /* Pulse loader */
334 .pulse-loader {
335 width: 40px;
336 height: 40px;
337 background: #3b82f6;
338 border-radius: 50%;
339 animation: pulse 1.5s ease-in-out infinite;
340 margin: 0 auto 1rem;
341 }
342
343 @keyframes pulse {
344 0%, 100% {
345 transform: scale(1);
346 opacity: 1;
347 }
348 50% {
349 transform: scale(1.3);
350 opacity: 0.7;
351 }
352 }
353
354 /* Dots loader */
355 .dots-loader {
356 display: flex;
357 justify-content: center;
358 gap: 0.5rem;
359 margin: 0 auto 1rem;
360 }
361
362 .dot {
363 width: 12px;
364 height: 12px;
365 background: #3b82f6;
366 border-radius: 50%;
367 animation: bounce 1.4s ease-in-out infinite;
368 }
369
370 .dot:nth-child(2) { animation-delay: 0.2s; }
371 .dot:nth-child(3) { animation-delay: 0.4s; }
372
373 @keyframes bounce {
374 0%, 80%, 100% {
375 transform: scale(0.8);
376 opacity: 0.5;
377 }
378 40% {
379 transform: scale(1.2);
380 opacity: 1;
381 }
382 }
383
384 /* Progress bar */
385 .progress-container {
386 width: 100%;
387 height: 8px;
388 background: #e5e7eb;
389 border-radius: 4px;
390 overflow: hidden;
391 margin: 1rem auto;
392 }
393
394 .progress-bar {
395 height: 100%;
396 background: linear-gradient(90deg, #3b82f6, #8b5cf6);
397 border-radius: 4px;
398 width: 0%;
399 animation: fillProgress 3s ease-out forwards;
400 }
401
402 @keyframes fillProgress {
403 to { width: 100%; }
404 }
405
406 /* 3D Card Flip */
407 .flip-card-container {
408 perspective: 1000px;
409 width: 300px;
410 height: 200px;
411 margin: 2rem auto;
412 }
413
414 .flip-card {
415 width: 100%;
416 height: 100%;
417 transform-style: preserve-3d;
418 transition: transform 0.6s ease;
419 cursor: pointer;
420 }
421
422 .flip-card:hover {
423 transform: rotateY(180deg);
424 }
425
426 .flip-card-front,
427 .flip-card-back {
428 position: absolute;
429 width: 100%;
430 height: 100%;
431 backface-visibility: hidden;
432 border-radius: 16px;
433 display: flex;
434 align-items: center;
435 justify-content: center;
436 color: white;
437 font-weight: bold;
438 font-size: 1.2rem;
439 }
440
441 .flip-card-front {
442 background: linear-gradient(135deg, #3b82f6, #1e40af);
443 }
444
445 .flip-card-back {
446 background: linear-gradient(135deg, #10b981, #047857);
447 transform: rotateY(180deg);
448 }
449
450 /* Morphing shapes */
451 .morph-container {
452 display: flex;
453 justify-content: center;
454 gap: 2rem;
455 margin: 2rem 0;
456 }
457
458 .morph-shape {
459 width: 100px;
460 height: 100px;
461 background: linear-gradient(135deg, #f59e0b, #d97706);
462 transition: all 0.5s ease;
463 cursor: pointer;
464 }
465
466 .morph-circle {
467 border-radius: 0;
468 }
469
470 .morph-circle:hover {
471 border-radius: 50%;
472 transform: rotate(360deg) scale(1.1);
473 }
474
475 .morph-square {
476 border-radius: 50%;
477 transform: rotate(45deg);
478 }
479
480 .morph-square:hover {
481 border-radius: 0;
482 transform: rotate(0deg) scale(1.2);
483 }
484
485 /* Text animations */
486 .animated-text {
487 font-size: 3rem;
488 font-weight: bold;
489 text-align: center;
490 margin: 2rem 0;
491 background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ef4444, #10b981);
492 background-size: 300% 300%;
493 -webkit-background-clip: text;
494 -webkit-text-fill-color: transparent;
495 background-clip: text;
496 animation: gradientShift 3s ease-in-out infinite;
497 }
498
499 @keyframes gradientShift {
500 0%, 100% {
501 background-position: 0% 50%;
502 }
503 50% {
504 background-position: 100% 50%;
505 }
506 }
507
508 /* Staggered list animation */
509 .stagger-list {
510 list-style: none;
511 max-width: 400px;
512 margin: 2rem auto;
513 }
514
515 .stagger-item {
516 background: white;
517 padding: 1rem;
518 margin-bottom: 0.5rem;
519 border-radius: 8px;
520 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
521 transform: translateX(-100px);
522 opacity: 0;
523 animation: slideInLeft 0.6s ease-out forwards;
524 }
525
526 .stagger-item:nth-child(1) { animation-delay: 0.1s; }
527 .stagger-item:nth-child(2) { animation-delay: 0.2s; }
528 .stagger-item:nth-child(3) { animation-delay: 0.3s; }
529 .stagger-item:nth-child(4) { animation-delay: 0.4s; }
530 .stagger-item:nth-child(5) { animation-delay: 0.5s; }
531
532 @keyframes slideInLeft {
533 to {
534 transform: translateX(0);
535 opacity: 1;
536 }
537 }
538
539 /* Interactive hover effects */
540 .hover-effects {
541 display: grid;
542 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
543 gap: 2rem;
544 margin: 2rem 0;
545 }
546
547 .hover-box {
548 width: 150px;
549 height: 150px;
550 background: #3b82f6;
551 border-radius: 16px;
552 display: flex;
553 align-items: center;
554 justify-content: center;
555 color: white;
556 font-weight: bold;
557 cursor: pointer;
558 transition: all 0.3s ease;
559 }
560
561 .hover-glow:hover {
562 box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
563 }
564
565 .hover-wobble:hover {
566 animation: wobble 0.5s ease-in-out;
567 }
568
569 @keyframes wobble {
570 0%, 100% { transform: rotate(0deg); }
571 25% { transform: rotate(-5deg); }
572 75% { transform: rotate(5deg); }
573 }
574
575 .hover-bounce:hover {
576 animation: bounceUp 0.5s ease-in-out;
577 }
578
579 @keyframes bounceUp {
580 0%, 100% { transform: translateY(0); }
581 50% { transform: translateY(-20px); }
582 }
583
584 .hover-shake:hover {
585 animation: shake 0.5s ease-in-out;
586 }
587
588 @keyframes shake {
589 0%, 100% { transform: translateX(0); }
590 25% { transform: translateX(-5px); }
591 75% { transform: translateX(5px); }
592 }
593
594 /* Performance indicators */
595 .performance-note {
596 background: #fef3c7;
597 border: 1px solid #f59e0b;
598 border-radius: 8px;
599 padding: 1rem;
600 margin: 2rem 0;
601 text-align: center;
602 color: #92400e;
603 }
604
605 /* Mobile optimizations */
606 @media (max-width: 768px) {
607 .hero {
608 padding: 4rem 0;
609 }
610
611 .card-grid {
612 grid-template-columns: 1fr;
613 }
614
615 .hover-effects {
616 grid-template-columns: repeat(2, 1fr);
617 }
618
619 .hover-box {
620 width: 120px;
621 height: 120px;
622 }
623 }
624 </style>
625</head>
626<body>
627 <!-- Header with animated navigation -->
628 <header class="header">
629 <div class="container">
630 <nav class="nav">
631 <a href="#" class="nav-brand">⚡ Animation Master</a>
632 <ul class="nav-menu">
633 <li class="nav-item">
634 <a href="#transitions" class="nav-link">Transitions</a>
635 </li>
636 <li class="nav-item">
637 <a href="#keyframes" class="nav-link">Keyframes</a>
638 </li>
639 <li class="nav-item">
640 <a href="#transforms" class="nav-link">Transforms</a>
641 </li>
642 <li class="nav-item">
643 <a href="#performance" class="nav-link">Performance</a>
644 </li>
645 </ul>
646 </nav>
647 </div>
648 </header>
649
650 <!-- Hero section with background animation -->
651 <section class="hero">
652 <div class="container">
653 <div class="hero-content">
654 <h1>Master CSS Animations</h1>
655 <p>Create smooth, engaging motion that enhances user experience with transitions, keyframes, and transforms.</p>
656 <button class="btn" onclick="scrollToSection('transitions')">Start Animating</button>
657 <button class="btn" onclick="scrollToSection('examples')">See Examples</button>
658 </div>
659 </div>
660 </section>
661
662 <!-- Transitions Section -->
663 <section id="transitions" class="section">
664 <div class="container">
665 <h2 class="section-title">🎯 CSS Transitions</h2>
666
667 <div class="card-grid">
668 <div class="card">
669 <div class="card-icon" style="background: linear-gradient(135deg, #3b82f6, #1e40af);">🔄</div>
670 <h3>Smooth Property Changes</h3>
671 <p>Transitions provide smooth changes between CSS property values over time, creating natural motion effects that feel intuitive to users.</p>
672 </div>
673
674 <div class="card">
675 <div class="card-icon" style="background: linear-gradient(135deg, #10b981, #047857);">⏱️</div>
676 <h3>Timing Functions</h3>
677 <p>Control animation pacing with ease, linear, ease-in, ease-out, and custom cubic-bezier curves for natural motion.</p>
678 </div>
679
680 <div class="card">
681 <div class="card-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706);">🎨</div>
682 <h3>Multiple Properties</h3>
683 <p>Animate multiple properties simultaneously with different durations and delays for complex, layered effects.</p>
684 </div>
685 </div>
686 </div>
687 </section>
688
689 <!-- Keyframe Animations Section -->
690 <section id="keyframes" class="section" style="background: white;">
691 <div class="container">
692 <h2 class="section-title">🎬 Keyframe Animations</h2>
693
694 <div class="animated-text">Animated Typography</div>
695
696 <div class="loader-section">
697 <div class="loader-card">
698 <div class="spinner"></div>
699 <h4>Spin Loader</h4>
700 <p>Rotating border animation for loading states</p>
701 </div>
702
703 <div class="loader-card">
704 <div class="pulse-loader"></div>
705 <h4>Pulse Loader</h4>
706 <p>Scaling animation that draws attention</p>
707 </div>
708
709 <div class="loader-card">
710 <div class="dots-loader">
711 <div class="dot"></div>
712 <div class="dot"></div>
713 <div class="dot"></div>
714 </div>
715 <h4>Dots Loader</h4>
716 <p>Staggered bounce animation sequence</p>
717 </div>
718
719 <div class="loader-card">
720 <div class="progress-container">
721 <div class="progress-bar"></div>
722 </div>
723 <h4>Progress Bar</h4>
724 <p>Animated progress indication with gradient fill</p>
725 </div>
726 </div>
727 </div>
728 </section>
729
730 <!-- Transform Section -->
731 <section id="transforms" class="section">
732 <div class="container">
733 <h2 class="section-title">🔄 CSS Transforms</h2>
734
735 <!-- 3D Flip Card -->
736 <div class="flip-card-container">
737 <div class="flip-card">
738 <div class="flip-card-front">
739 <div>Hover to flip!</div>
740 </div>
741 <div class="flip-card-back">
742 <div>3D Transform Magic!</div>
743 </div>
744 </div>
745 </div>
746
747 <!-- Morphing shapes -->
748 <div class="morph-container">
749 <div class="morph-shape morph-circle" title="Hover to make circle"></div>
750 <div class="morph-shape morph-square" title="Hover to make square"></div>
751 </div>
752 </div>
753 </section>
754
755 <!-- Staggered Animation -->
756 <section class="section" style="background: white;">
757 <div class="container">
758 <h2 class="section-title">📋 Staggered Animations</h2>
759
760 <ul class="stagger-list">
761 <li class="stagger-item">🎯 Plan animation sequence</li>
762 <li class="stagger-item">⚡ Optimize for performance</li>
763 <li class="stagger-item">📱 Test on mobile devices</li>
764 <li class="stagger-item">♿ Respect user preferences</li>
765 <li class="stagger-item">🎨 Enhance user experience</li>
766 </ul>
767 </div>
768 </section>
769
770 <!-- Interactive Hover Effects -->
771 <section id="examples" class="section">
772 <div class="container">
773 <h2 class="section-title">🎮 Interactive Hover Effects</h2>
774
775 <div class="hover-effects">
776 <div class="hover-box hover-glow">Glow</div>
777 <div class="hover-box hover-wobble">Wobble</div>
778 <div class="hover-box hover-bounce">Bounce</div>
779 <div class="hover-box hover-shake">Shake</div>
780 </div>
781 </div>
782 </section>
783
784 <!-- Performance Section -->
785 <section id="performance" class="section" style="background: white;">
786 <div class="container">
787 <h2 class="section-title">⚡ Performance & Accessibility</h2>
788
789 <div class="performance-note">
790 <h3>🔧 Performance Tips</h3>
791 <p>Use transform and opacity for smooth animations • Avoid animating layout properties • Use will-change sparingly • Respect prefers-reduced-motion</p>
792 </div>
793
794 <div class="card-grid">
795 <div class="card">
796 <div class="card-icon" style="background: linear-gradient(135deg, #ef4444, #dc2626);">🚀</div>
797 <h3>GPU Acceleration</h3>
798 <p>Use transform and opacity properties to trigger hardware acceleration for smooth 60fps animations.</p>
799 </div>
800
801 <div class="card">
802 <div class="card-icon" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">♿</div>
803 <h3>Accessibility</h3>
804 <p>Respect prefers-reduced-motion setting and provide alternative feedback for users sensitive to motion.</p>
805 </div>
806
807 <div class="card">
808 <div class="card-icon" style="background: linear-gradient(135deg, #06b6d4, #0891b2);">📱</div>
809 <h3>Mobile Optimization</h3>
810 <p>Simplify animations on mobile devices and avoid complex effects that impact battery life.</p>
811 </div>
812 </div>
813 </div>
814 </section>
815
816 <!-- Summary -->
817 <section class="section" style="text-align: center; background: #1e293b; color: white;">
818 <div class="container">
819 <h2 style="color: white; margin-bottom: 2rem;">🎉 Animation Mastery Achieved!</h2>
820 <p style="font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9;">
821 You've mastered the art of creating smooth, engaging animations that enhance user experience!
822 </p>
823
824 <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 2rem 0;">
825 <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 12px;">
826 <strong>✅ Transitions</strong><br>
827 <small>Smooth property changes with timing control</small>
828 </div>
829 <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 12px;">
830 <strong>✅ Keyframes</strong><br>
831 <small>Complex animation sequences and effects</small>
832 </div>
833 <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 12px;">
834 <strong>✅ Transforms</strong><br>
835 <small>Hardware-accelerated 2D and 3D effects</small>
836 </div>
837 <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 12px;">
838 <strong>✅ Performance</strong><br>
839 <small>Optimized animations with accessibility</small>
840 </div>
841 </div>
842 </div>
843 </section>
844
845 <script>
846 // Smooth scroll function
847 function scrollToSection(id) {
848 document.getElementById(id).scrollIntoView({
849 behavior: 'smooth',
850 block: 'start'
851 });
852 }
853
854 // Intersection Observer for section titles
855 const observerOptions = {
856 threshold: 0.1,
857 rootMargin: '0px 0px -50px 0px'
858 };
859
860 const observer = new IntersectionObserver((entries) => {
861 entries.forEach(entry => {
862 if (entry.isIntersecting) {
863 entry.target.classList.add('visible');
864 }
865 });
866 }, observerOptions);
867
868 // Observe all section titles
869 document.querySelectorAll('.section-title').forEach(title => {
870 observer.observe(title);
871 });
872
873 // Add click handlers for interactive elements
874 document.addEventListener('DOMContentLoaded', function() {
875 // Restart progress bar animation on click
876 const progressBar = document.querySelector('.progress-bar');
877 progressBar.addEventListener('click', function() {
878 this.style.animation = 'none';
879 setTimeout(() => {
880 this.style.animation = 'fillProgress 3s ease-out forwards';
881 }, 10);
882 });
883
884 // Add performance monitoring
885 let animationCount = 0;
886 document.addEventListener('animationstart', () => animationCount++);
887 document.addEventListener('animationend', () => animationCount--);
888
889 // Log performance warnings
890 setInterval(() => {
891 if (animationCount > 10) {
892 console.warn('High animation count detected:', animationCount);
893 }
894 }, 1000);
895 });
896 </script>
897</body>
898</html>This comprehensive CSS animations demonstration showcases all key concepts from Lesson 10:
🔄 Complete Transition Mastery:
🎬 Advanced Keyframe Animations:
⚡ Transform Function Excellence:
🎯 Performance Optimization:
🎨 Real-World Applications:
This example demonstrates how CSS animations enhance user experience through purposeful motion while maintaining excellent performance and accessibility standards.
Fantastic work mastering CSS animations and transitions! You now know how to create smooth, engaging motion that enhances user experience. Next, we'll explore "Pseudo-classes & Pseudo-elements" where you'll learn advanced selectors for styling different states and creating decorative elements without extra HTML. Get ready to unlock powerful styling techniques!
Your progress is saved in this browser, on this device only.