1) Fade in Animation on Page Load
<!DOCTYPE html> <html> <head> <style> .fade-in { animation: fadeIn ease 2s; font-size: 6em; text-align: center; color: #00ffd5; font-family: 'Segoe UI', Calibri, sans-serif; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } </style> </head> <body> <div class="header"> <h1 class="fade-in">The Header</h1> </div> </body> </html>
2) Slide-In from the Left
<!DOCTYPE html> <html> <head> <style> .slide-left { animation: slideLeft 1.2s ease-out; } @keyframes slideLeft { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } </style> </head> <body> <div class="header"> <h1 class="slide-left">The Header</h1> </div> </body> </html>
3) Bounce-in Effect
<!DOCTYPE html> <html> <head> <style> .bounce-in { animation: bounceIn 1s; } @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); opacity: 1; } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } </style> </head> <body> <div class="header"> <h1 class="bounce-in">You Page Header</h1> </div> </body> </html>
4) Glowing Text Pulse
<!DOCTYPE html> <html> <head> <style> .glow-pulse { color: #00ffd5; text-shadow: 0 0 10px #00ffd5, 0 0 20px #00ffd5; animation: glow 1.5s ease-in-out infinite alternate; } @keyframes glow { from { text-shadow: 0 0 10px #00ffd5, 0 0 20px #00ffd5; } to { text-shadow: 0 0 20px #00fff2, 0 0 30px #00fff2; } } </style> </head> <body> <div class="header"> <h1 class="glow-pulse">You Page Header</h1> </div> </body> </html>
Conclusion
Animated headers are more than a visual flourish, they're a powerful way to guide attention, communicate brand personality, and create that memorable first impression. Whether you're using subtle fades or dynamic slides, these effects can make your content feel alive and engaging.
With just a few lines of CSS, you can transform a static title into an elegant entrance that captures the tone of your entire page.