/** * SempiPlancia - Global Animations & Transitions * Modern, smooth animations for enhanced UX * * Usage: Include in of all pages: * * * Features: * - Page load animations * - Hover effects * - Button animations * - Card animations * - Loading states * - Skeleton loaders * - Smooth transitions */ /* ========== ROOT VARIABLES ========== */ :root { --animation-duration-fast: 0.2s; --animation-duration-normal: 0.3s; --animation-duration-slow: 0.5s; --animation-easing: cubic-bezier(0.4, 0, 0.2, 1); --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --animation-easing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); } /* ========== PAGE LOAD ANIMATIONS ========== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Apply page load animation */ .page-container, .main-content, .dashboard-container { animation: fadeIn var(--animation-duration-slow) var(--animation-easing); } /* ========== CARD ANIMATIONS ========== */ .card, .widget, .panel, [class*="card-"], [class*="widget-"] { transition: all var(--animation-duration-normal) var(--animation-easing); } .card:hover, .widget:hover, .panel:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } /* Card entrance animation */ .card.animate-in, .widget.animate-in { animation: fadeInUp var(--animation-duration-slow) var(--animation-easing) backwards; } /* Stagger animation for multiple cards */ .card.animate-in:nth-child(1), .widget.animate-in:nth-child(1) { animation-delay: 0.05s; } .card.animate-in:nth-child(2), .widget.animate-in:nth-child(2) { animation-delay: 0.1s; } .card.animate-in:nth-child(3), .widget.animate-in:nth-child(3) { animation-delay: 0.15s; } .card.animate-in:nth-child(4), .widget.animate-in:nth-child(4) { animation-delay: 0.2s; } .card.animate-in:nth-child(5), .widget.animate-in:nth-child(5) { animation-delay: 0.25s; } .card.animate-in:nth-child(6), .widget.animate-in:nth-child(6) { animation-delay: 0.3s; } /* ========== BUTTON ANIMATIONS ========== */ button, .btn, [class*="button"], a.button { transition: all var(--animation-duration-fast) var(--animation-easing); position: relative; overflow: hidden; } button:hover, .btn:hover, [class*="button"]:hover, a.button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } button:active, .btn:active, [class*="button"]:active, a.button:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } /* Ripple effect */ @keyframes ripple { from { transform: scale(0); opacity: 0.5; } to { transform: scale(4); opacity: 0; } } button::after, .btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%) scale(0); pointer-events: none; } button:active::after, .btn:active::after { animation: ripple 0.6s var(--animation-easing); } /* ========== FORM INPUT ANIMATIONS ========== */ input, textarea, select { transition: all var(--animation-duration-normal) var(--animation-easing); } input:focus, textarea:focus, select:focus { transform: scale(1.02); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } /* Label float animation */ @keyframes labelFloat { from { transform: translateY(0); font-size: 14px; } to { transform: translateY(-24px); font-size: 12px; } } .form-group.has-value label, .form-group input:focus + label { animation: labelFloat var(--animation-duration-normal) var(--animation-easing) forwards; } /* ========== LOADING ANIMATIONS ========== */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .spinner, .loading-icon, [class*="spinner"] { animation: spin 1s linear infinite; } .pulse { animation: pulse 1.5s ease-in-out infinite; } .bounce { animation: bounce 0.6s ease-in-out infinite; } /* ========== SKELETON LOADERS ========== */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .skeleton { background: linear-gradient( 90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px ); background-size: 1000px 100%; animation: shimmer 2s infinite linear; border-radius: 4px; } .skeleton-text { height: 16px; margin-bottom: 8px; border-radius: 4px; } .skeleton-title { height: 24px; margin-bottom: 12px; border-radius: 4px; width: 60%; } .skeleton-card { height: 200px; border-radius: 12px; } /* ========== MODAL ANIMATIONS ========== */ @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(50px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal { animation: modalFadeIn var(--animation-duration-normal) var(--animation-easing); } .modal-content, .modal-dialog, [class*="modal"] > div { animation: modalSlideUp var(--animation-duration-slow) var(--animation-easing-bounce); } /* ========== DROPDOWN ANIMATIONS ========== */ @keyframes dropdownSlide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .dropdown-menu, .select-menu, [class*="dropdown"] { animation: dropdownSlide var(--animation-duration-normal) var(--animation-easing); } /* ========== TOOLTIP ANIMATIONS ========== */ @keyframes tooltipFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .tooltip, [data-tooltip]::after { animation: tooltipFade var(--animation-duration-fast) var(--animation-easing); } /* ========== CHART ANIMATIONS ========== */ @keyframes chartFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .chart-container, canvas, [class*="chart"] { animation: chartFadeIn var(--animation-duration-slow) var(--animation-easing); } /* ========== TABLE ROW ANIMATIONS ========== */ tr { transition: all var(--animation-duration-fast) var(--animation-easing); } tr:hover { background-color: rgba(102, 126, 234, 0.05); transform: scale(1.01); } tbody tr { animation: fadeInUp var(--animation-duration-normal) var(--animation-easing) backwards; } tbody tr:nth-child(1) { animation-delay: 0.05s; } tbody tr:nth-child(2) { animation-delay: 0.1s; } tbody tr:nth-child(3) { animation-delay: 0.15s; } tbody tr:nth-child(4) { animation-delay: 0.2s; } tbody tr:nth-child(5) { animation-delay: 0.25s; } /* ========== NOTIFICATION ANIMATIONS ========== */ @keyframes notificationSlideIn { from { opacity: 0; transform: translateX(400px); } to { opacity: 1; transform: translateX(0); } } @keyframes notificationSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(400px); } } .notification, .toast, .alert { animation: notificationSlideIn var(--animation-duration-slow) var(--animation-easing); } .notification.hide, .toast.hide, .alert.hide { animation: notificationSlideOut var(--animation-duration-normal) var(--animation-easing) forwards; } /* ========== BADGE ANIMATIONS ========== */ @keyframes badgePop { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .badge, [class*="badge"] { animation: badgePop var(--animation-duration-normal) var(--animation-easing-bounce); } /* ========== PROGRESS BAR ANIMATIONS ========== */ @keyframes progressFill { from { width: 0%; } } .progress-bar, [class*="progress"] > div { animation: progressFill 1s var(--animation-easing); } @keyframes progressIndeterminate { 0% { left: -50%; } 100% { left: 100%; } } .progress-indeterminate::after { content: ''; position: absolute; top: 0; left: -50%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); animation: progressIndeterminate 1.5s infinite; } /* ========== ICON ANIMATIONS ========== */ .icon-rotate { transition: transform var(--animation-duration-normal) var(--animation-easing); } .icon-rotate:hover { transform: rotate(180deg); } .icon-bounce:hover { animation: bounce 0.6s ease-in-out; } .icon-shake:hover { animation: shake 0.5s; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } } /* ========== SCROLL ANIMATIONS ========== */ .scroll-reveal { opacity: 0; transform: translateY(30px); transition: all var(--animation-duration-slow) var(--animation-easing); } .scroll-reveal.visible { opacity: 1; transform: translateY(0); } /* ========== FLOATING ANIMATIONS ========== */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .float { animation: float 3s ease-in-out infinite; } /* ========== GRADIENT ANIMATIONS ========== */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animated-gradient { background-size: 200% 200%; animation: gradientShift 5s ease infinite; } /* ========== UTILITY CLASSES ========== */ .fade-in { animation: fadeIn var(--animation-duration-normal) var(--animation-easing); } .fade-in-up { animation: fadeInUp var(--animation-duration-slow) var(--animation-easing); } .fade-in-down { animation: fadeInDown var(--animation-duration-slow) var(--animation-easing); } .slide-in-left { animation: slideInLeft var(--animation-duration-slow) var(--animation-easing); } .slide-in-right { animation: slideInRight var(--animation-duration-slow) var(--animation-easing); } .scale-in { animation: scaleIn var(--animation-duration-normal) var(--animation-easing); } /* Disable animations for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========== PERFORMANCE OPTIMIZATIONS ========== */ /* Use GPU acceleration for transforms */ .card, .widget, .panel, button, .btn { will-change: transform; } /* Optimize animations for performance */ @media (prefers-reduced-motion: no-preference) { .smooth-scroll { scroll-behavior: smooth; } }