/* * Izzo Scroll Animations – animations.css * Startzustände + fertige Zustände für alle Animationstypen. * FOUC-Prevention: [data-izzo-anim]{opacity:0} kommt als Inline-Style im */ /* ----------------------------------------------------------------------- * Startzustände (.izzo-anim--pending) * Das Element ist unsichtbar / verschoben, bereit für die Transition * --------------------------------------------------------------------- */ /* Fade In */ .izzo-anim--fade-in.izzo-anim--pending { opacity: 0; transform: none; } /* Slide Up */ .izzo-anim--slide-up.izzo-anim--pending { opacity: 0; transform: translateY( 40px ); } /* Slide Down */ .izzo-anim--slide-down.izzo-anim--pending { opacity: 0; transform: translateY( -40px ); } /* Slide von Links */ .izzo-anim--slide-left.izzo-anim--pending { opacity: 0; transform: translateX( -50px ); } /* Slide von Rechts */ .izzo-anim--slide-right.izzo-anim--pending { opacity: 0; transform: translateX( 50px ); } /* Zoom In */ .izzo-anim--zoom-in.izzo-anim--pending { opacity: 0; transform: scale( 0.85 ); } /* Zoom Out */ .izzo-anim--zoom-out.izzo-anim--pending { opacity: 0; transform: scale( 1.15 ); } /* Flip Up */ .izzo-anim--flip-up.izzo-anim--pending { opacity: 0; transform: perspective( 600px ) rotateX( 25deg ) translateY( 30px ); } /* ----------------------------------------------------------------------- * Endzustand (.izzo-anim--done) * Transition läuft von pending → done * --------------------------------------------------------------------- */ .izzo-anim--done { opacity: 1 !important; transform: none !important; } /* ----------------------------------------------------------------------- * Barrierefreiheit: prefers-reduced-motion * Alle Animationen deaktivieren, Elemente sofort einblenden * --------------------------------------------------------------------- */ @media ( prefers-reduced-motion: reduce ) { [data-izzo-anim] { opacity: 1 !important; transform: none !important; transition: none !important; } }