html {

}
@keyframes fadeIframe {
  50% {
      scale: 0.5;
      opacity: 0;
      filter: blur(100px);
  }
  100% {
scale: 1;
      opacity: 1;
      filter: blur(0px);

  }
}
.frame-bg {
  animation-name: fadeIframe;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}

.frame-bg {
      scale: 0.5;
      opacity: 0;
      filter: blur(100px);

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 2em;
}
.frame-bg .bg-color,
.frame-bg .bg-black {
  filter: brightness(0.7);
  width: 200%;
  position: absolute;
  border-radius: 100em;
  -webkit-animation: rotate 5s linear infinite;
          animation: rotate 15s linear infinite;
}
.frame-bg .bg-color {
  right: 0;
  top: 0;
  z-index: 10;
}
.frame-bg .bg-black {
  left: 0;
  bottom: 0;
  filter: blur(40px);
  z-inxed: 1;
  animation-direction: reverse;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
}

@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}