Explores the technical challenges of combining CSS scroll-driven animations with @starting-style for fade-in effects. The cascade, animation-fill-mode, and implicit keyframes create unexpected behavior when trying to transition opacity during page load while also animating it on scroll. The solution involves using a registered custom property as an indirection layer, transitioning it from 0 to 1 and referencing it in an explicit 'to' keyframe. Includes practical examples with view timelines and demonstrates additional techniques like using sibling-index() with min() to limit transition delays.
Sort: