ALTERNATE

The box below animates when the box within the scroll container comes fully into view. To the right is the CSS setting up this scroll-triggered animation:

                @keyframes fade-in {
                    from {
                      opacity: 0.1;
                      transform: scaleX(0.1);
                      background-color: black;
                    }
                  
                    to {
                      background-color: black;
                      transform: scaleX(3);
                    }
                }
                animation: fade-in .5s both;
                animation-trigger: --viewtimeline alternate contain 0% contain 100%;

Controls

animation-play-state
animation-fill-mode

A more realistic example below involves animating pictures into view as their associated sections are scrolled into view

Scroll the sections into view and observer their related pictures animate into view on the left.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod consequatur unde perferendis animi, praesentium odio voluptates provident iusto deleniti! Alias quasi ab tempora sunt? Nesciunt beatae aut et quo!