CSS Animations: Dale vida a tu web
✨ Bounce
@keyframes bounce {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
🔄 Spin 3D
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
💫 Pulse Glow
@keyframes pulseGlow {
0%,100% { transform: scale(1); box-shadow: 0 0 0 0 cyan; }
50% { transform: scale(1.1); box-shadow: 0 0 0 20px transparent; }
}
🎭 Shake (Hover)
⬅️ Pasa el mouse
.shake-anim:hover {
animation: shake 0.5s ease;
}
Tips profesionales
Usa will-change: transform para animaciones más suaves
Prefiere transform y opacity sobre top/left para mejor rendimiento
Combina múltiples animaciones separando con comas