I have a page with scroll snapping, and a css animation. The scroll snapping works fine, except with a css animation playing. When css animation isn't playing, the scroll snapping scrolls smoothly, but when it plays, it scrolls instantly, which is not smooth. Anybody knows why this happens and how to fix it?

:root {
    --white: #fff;
    --gray: #3f5060;
    --red: #e2403d;
    --orange: #ef9325;
    --blue: #3fa4dc;

    --darken-50: #b0b0b066;
    --darken-75: #b0b0b0aa;

    --background: #3f5060;
    --font: #ffffff;
    --header: #000000;
    --header-button: #000000;
    --header-button-hover: #ef9325;
    --button-color: #ef9325;
    --button-color-hover: #ffa335;
}
.section {position:absolute;left:0px;height:100%;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;scroll-snap-align: start;}
.decor-box-orange {background-color:var(--orange);position:absolute}
html {
    background-color: var(--background);
    font-family: medium;
    color: var(--font);
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
@keyframes section2decorbox {
    0% {left:-100%;}
    10% {left:-100%;}
    30% {left:0%;}
    70% {left:0%;}
    90% {left:100%;}
    100% {left:100%;}
}

@keyframes section2decorbox2 {
    0% {left:100%;}
    10% {left:100%;}
    30% {left:0%;}
    70% {left:0%;}
    90% {left:-100%;}
    100% {left:-100%;}
}

<section class="section" style="top:0px;overflow: hidden;">
this is the 1st section    
</section>
<section class="section" style="top:100%;background:var(--blue);">
    <div style="animation:section2decorbox 10s alternate infinite;position:absolute;width:100%;height:10%;top:20%;z-index:1;" class="decor-box-orange"></div>
    <div style="animation:section2decorbox2 10s alternate infinite;position:absolute;width:100%;height:10%;top:70%;z-index:1;" class="decor-box-orange"></div>
    <h1 style="z-index:2;">H1</h1>
    <p style="width:50%;z-index:2;" align="center">P text</p>
</section>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

:root {
    --white: #fff;
    --gray: #3f5060;
    --red: #e2403d;
    --orange: #ef9325;
    --blue: #3fa4dc;

    --darken-50: #b0b0b066;
    --darken-75: #b0b0b0aa;

    --background: #3f5060;
    --font: #ffffff;
    --header: #000000;
    --header-button: #000000;
    --header-button-hover: #ef9325;
    --button-color: #ef9325;
    --button-color-hover: #ffa335;
}
.section {position:absolute;left:0px;height:100%;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;scroll-snap-align: start;}
.decor-box-orange {background-color:var(--orange);position:absolute}
html {
    background-color: var(--background);
    font-family: medium;
    color: var(--font);
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
@keyframes section2decorbox {
    0% {left:-100%;}
    10% {left:-100%;}
    30% {left:0%;}
    70% {left:0%;}
    90% {left:100%;}
    100% {left:100%;}
}

@keyframes section2decorbox2 {
    0% {left:100%;}
    10% {left:100%;}
    30% {left:0%;}
    70% {left:0%;}
    90% {left:-100%;}
    100% {left:-100%;}
}

<section class="section" style="top:0px;overflow: hidden;">
this is the 1st section    
</section>
<section class="section" style="top:100%;background:var(--blue);">
    <div style="animation:section2decorbox 10s alternate infinite;position:absolute;width:100%;height:10%;top:20%;z-index:1;" class="decor-box-orange"></div>
    <div style="animation:section2decorbox2 10s alternate infinite;position:absolute;width:100%;height:10%;top:70%;z-index:1;" class="decor-box-orange"></div>
    <h1 style="z-index:2;">H1</h1>
    <p style="width:50%;z-index:2;" align="center">P text</p>
</section>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I fixed it by setting it from
scroll-snap-type: y mandatory;
to
scroll-snap-type: y proximity;
This didn't make the scroll instant and still smooth when snapped to another section when the css animation is playing.