在大元素上做 CSS 背景动画，而不会隐藏在主体上并保持滚动

Question

我想知道是否有一种方法可以在不影响页面滚动的情况下对背景上的大对象进行动画处理，因为我目前所处的情况是在使用position:absolute;时溢出了对象；在背景项目上，如果我想用溢出删除对象的滚动：隐藏；然后整个页面失去滚动也是我不想要的另一件事。

有什么想法吗？

工作小提琴：

https://jsfiddle.net/mx0zns4o/

SCSS：

body{
  background: grey;
}

.circles {
        &.closing {
            .bigCircle {
                animation: bigCircleIn 1s 0s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-timing-function: cubic-bezier(.86, 0, .07, 1);
            }

            .smallCircle {
                animation: smallCircleIn 1s 0s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-timing-function: cubic-bezier(.86, 0, .07, 1);
            }
        }

        &.opened {
            .bigCircle {
                animation: bigCircleOut 1s 0s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-timing-function: cubic-bezier(.86, 0, .07, 1);
            }

            .smallCircle {
                animation: smallCircleOut 1s 0s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-timing-function: cubic-bezier(.86, 0, .07, 1);
            }
        }

        .bigCircle,
        .smallCircle {
            position: absolute;
            color: white;
        }

        .bigCircle {
            width: 2947px;
            height: 2947px;
            border-radius: 2947px;
            text-align: center;
            background: linear-gradient(204deg, #FFF 15.48%, rgba(255, 255, 255, 0.00) 62.97%);
            opacity: 0.12;
        }

        .smallCircle {
            width: 1173px;
            height: 1173px;
            border-radius: 1173px;
            opacity: 0.06;
            background: linear-gradient(204deg, #FFF 15.48%, rgba(255, 255, 255, 0.00) 50.01%);
        }
    }

@keyframes bigCircleOut {
  0% {
        left: -28%;
        top: -70px;
    }

    100% {
        left: 100%;
        top: -70px;
    }
}

@keyframes bigCircleIn {
  0% {
        left: 100%;
        top: -70px;
    }

    100% {
        left: -28%;
        top: -70px;
    }
}

@keyframes smallCircleOut {
  0% {
        left: -50%;
        top: 50%;
    }

    100% {
        left: -82%;
        top: 50%;
    }
}

@keyframes smallCircleIn {
  0% {
        left: -82%;
        top: 50%;
    }

    100% {
        left: -50%;
        top: 50%;
    }
}

JS：

$('.circles').toggleClass('opened closing');

HTML：

  <div class="circles opened">
    <div class="bigCircle"></div>
    <div class="smallCircle"></div>
  </div>


  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Header element</h1>
        <p>Some paragrah element</p>
      </div>
    </div>
  </div>

Answer 1

我把代码放入代码笔中，我发现没有滚动问题。

https://codepen.io/Dougy2021/pen/bGyNgQR

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

使用上述内容也可能有所帮助，因为它将容器以及圆圈本身设置为脱离流程。