然后页面加载动画抖动开始

Question

我正在尝试为我的一个网站创建一个非常微妙的入口动画。动画可以正常工作，但是当网站加载时，它看起来确实很乱，并闪烁将出现的内容，然后平滑并正常工作。

http://parkinsonbuildinggroup.flywheelsites.com

我正在使用Web构建器，但这部分是自定义编码的。网站构建器加载内容的方式可能有问题吗？

@keyframes fadeInScale {
  0% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1.0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

#_header_row-3-17{
  animation: 1s ease-in-out 2s 1 slideDown both;
}
div_block-16-18{
  animation: 1.5s ease-in-out 1s 1 fadeInScale both;
}
section-2-8 {
  background-image:radial-gradient(1000px 750px ellipse at 25% 50%, 
  rgba(0,0,0,.8), rgba(0,0,0,0)), 
  url("http://parkinsonbuildinggroup.flywheelsites.com/wp- 
  content/uploads/2019/04/BAX_4684-Recovered-1.jpg");
  background-size:cover;
  animation: 1s ease-in-out 0s 1 fadeIn both;
}

我希望网站加载非常顺利picture> text> header，但是由于某种原因，它一开始就结结巴巴，而且我似乎无法找出原因。