Kollektiv | Your private LLM knowledgebase

/** * Common Animation keyframes * * This file contains frequently used utility class combinations to reduce repetition * in your components and improve consistency across the application. */ @keyframes border-glow { 0% { box-shadow: 0 0 10px hsl(var(--color-primary) / 0.5); } 50% { box-shadow: 0 0 20px hsl(var(--color-primary) / 0.8); } 100% { box-shadow: 0 0 10px hsl(var(--color-primary) / 0.5); } } @keyframes ripple-down { 0%, 100% { transform: translateY(0); opacity: 0.8; } 50% { transform: translateY(4px); opacity: 1; } } /* Define keyframes for fade-in */ @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Define keyframes for fade-in-only without translation */ @keyframes fade-in-only { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse-in { 0% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes border-glow { 0% { box-shadow: 0 0 10px hsl(var(--color-primary) / 0.5); } 50% { box-shadow: 0 0 20px hsl(var(--color-primary) / 0.8); } 100% { box-shadow: 0 0 10px hsl(var(--color-primary) / 0.5); } } @keyframes ripple-down { 0%, 100% { transform: translateY(0); opacity: 0.8; } 50% { transform: translateY(4px); opacity: 1; } } /* Define keyframes for fade-in */ @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Define keyframes for fade-in-only without translation */ @keyframes fade-in-only { from { opacity: 0; } to { opacity: 1; } } /* Icon animation */ @keyframes icon-subtle-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } }