CSS Weekly #4: Advanced Animations with @keyframes
CSS Weekly #4: Advanced Animations with @keyframes 🎬
Hey sheinhardt@example.com,
Ready to bring your UI to life? Let's dive deep into CSS animations and create some magic!
Beyond Basic Animations
Everyone knows this:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
But let's level up! 🚀
Advanced Keyframe Techniques
1. Multi-Property Orchestration
@keyframes slideReveal {
0% {
opacity: 0;
transform: translateY(30px) scale(0.9);
filter: blur(5px);
}
50% {
filter: blur(2px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
.card {
animation: slideReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
2. Staggered Animations (No JS!)
.stagger-item {
opacity: 0;
animation: fadeInUp 0.5s forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
/* Or use custom properties for dynamic delays */
.stagger-item {
animation-delay: calc(var(--index) * 0.1s);
}
3. Infinite Ambient Animations
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-10px) rotate(-2deg);
}
66% {
transform: translateY(5px) rotate(2deg);
}
}
.floating-element {
animation: float 6s ease-in-out infinite;
}
🎯 Pro Pattern: Animation Composition
Combine multiple animations for complex effects:
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.loader {
animation:
spin 2s linear infinite,
pulse 1s ease-in-out infinite;
}
Performance Tips
1. Animate Transform & Opacity Only
/* ❌ Avoid: Triggers layout */
@keyframes bad {
to { width: 200px; }
}
/* ✅ Better: GPU accelerated */
@keyframes good {
to { transform: scaleX(2); }
}
2. Use will-change Wisely
.will-animate {
will-change: transform;
}
/* Remove after animation */
.will-animate.finished {
will-change: auto;
}
🌟 This Week's Showcase: Text Animation
Here's a slick text reveal effect:
@keyframes textReveal {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
.headline {
animation: textReveal 1s cubic-bezier(0.77, 0, 0.175, 1);
}
/* Add a sliding background */
.headline::before {
content: '';
position: absolute;
inset: 0;
background: var(--primary);
animation: textReveal 1s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}
Animation State with CSS Only!
Check this out - pause on hover:
.animated-card {
animation: bounce 2s infinite;
}
.animated-card:hover {
animation-play-state: paused;
}
🎨 Challenge: Loading Animation
Create a smooth loading animation using only CSS:
@keyframes loading {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.loading-bar::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent,
rgba(255,255,255,0.4),
transparent
);
animation: loading 1.5s infinite;
}
Resources
- Cubic-bezier.com - Visual curve editor
- Animista - Animation generator
- Use GPU layers - Performance guide
Sponsored by Framer - Design and publish stunning sites with zero code. CSS Weekly readers get 3 months free on Pro!
Next week: Container Queries - the future is here!
— Sarah from CSS Weekly
P.S. Show me your animations! Reply with your CodePen links 🎨
Add a comment: