@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes scale-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* Utility classes */ .animate-fade-in { animation: fade-in 0.3s ease both; } .animate-slide-up { animation: slide-up 0.4s ease both; } .animate-scale-in { animation: scale-in 0.25s ease both; } .animate-spin { animation: spin 1s linear infinite; } .animate-pulse { animation: pulse 1.5s ease infinite; }