Module 4
CSS Animations, Keyframes & Glassmorphism
20 mins read
Lesson 1: CSS Animations
1.1 Keyframes & Micro-Interactions
Using `@keyframes` animations, `transition: all 0.3s ease`, and `backdrop-filter` for glass card effects.
CSS3
@keyframes glowPulse {
0% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.2); }
50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); }
100% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.2); }
}
.saas-card {
animation: glowPulse 3s infinite ease-in-out;
}