CSS Variables, Transitions & Keyframe Animations
16 mins read
Free Lesson
Create fluid micro-interactions using transition, transform (translate, scale, rotate), and keyframes.
Smooth Micro-Interactions
/* Hover Elevation Transition */
.interactive-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.interactive-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.3);
}
/* Continuous Keyframe Animation */
@keyframes pulseGlow {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
.badge-live {
animation: pulseGlow 2s infinite ease-in-out;
}