/* * carousel.css * * This stylesheet provides the keyframe animations and utility classes * for the carousel component. It should be linked in the of your HTML file. */ /* Define custom keyframe animations for the slide effect */ @keyframes slideInFromRight { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes slideOutToLeft { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-100%); opacity: 0; } } @keyframes slideInFromLeft { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes slideOutToRight { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } /* * Animation classes to apply in JavaScript. * The cubic-bezier values give the animation a smooth, "bouncy" feel. * The 'forwards' value ensures the final state of the animation persists. */ .animate-in-right { animation: slideInFromRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .animate-out-left { animation: slideOutToLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Optional: Classes for animating from left to right */ .animate-in-left { animation: slideInFromLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .animate-out-right { animation: slideOutToRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Glassmorphic effect for the text container */ .glassmorphic-effect { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 1rem; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.3); }