body, html {

    width: 100%;

    height: 100%;

    display: flex;

}

​

#g-content,

#g-content-2,

#g-content-3 {

    width: 300px;

    height: 170vh;

    margin: auto;

    background: #999;

    padding-top: 100vh;

}

​

#g-box {

    font-size: 150px;

    height: 150px;

    margin: 0 auto 50px;

    text-align: center;

    background: rgba(255, 100, 0, .3);

}

​

@supports (animation-timeline: works) {

    @keyframes move {

        0% {

            transform: translate(-100%, 0);

            opacity: 0;

        }

        100% {

            transform: translate(0, 0);

            opacity: 1;

        }

    }

    @scroll-timeline box-move {

        source: auto;

        orientation: "vertical";

        scroll-offsets: 

            selector(#g-box) end 0, 

            selector(#g-box) end 1;

        /* Legacy Descriptors Below: */

        start: selector(#g-box) end 0;

        end: selector(#g-box) end 1;

        time-range: 1s;

    }

    #g-box {

        animation-name: move;

        animation-duration: 3s;

        animation-direction: alternate;

        animation-fill-mode: both;

        animation-easing-function: linear;

        animation-timeline: box-move;

    }

    #g-content-2 #g-box {

        animation-timeline: box-move-2;

    }

    @scroll-timeline box-move-2 {

        source: auto;

        orientation: "vertical";

        scroll-offsets: 

            selector(#g-box) end 1, 

            selector(#g-box) start 1;

        /* Legacy Descriptors Below: */

        start: selector(#g-box) end 1;

        end: selector(#g-box) start 1;

        time-range: 1s;

    }

    #g-content-3 #g-box {

        animation-timeline: box-move-3;

    }

    @scroll-timeline box-move-3 {

        source: auto;

        orientation: "vertical";

        scroll-offsets: 

            selector(#g-box) start 1, 

            selector(#g-box) start 0;

        /* Legacy Descriptors Below: */

        start: selector(#g-box) start 1;

        end: selector(#g-box) start 0;

        time-range: 1s;

    }

}

​