html,body {
  margin: 0;
  padding: 0;
}
.blend {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  --bg: red;
  
  &>div {
    background-color: var(--bg);
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    filter: url(#blend);  

    &>div {
      position: absolute;
      --x:0;
      --  : 50px;
      --time: 2s;
      --to: -100px;
      border-radius: 50%;
      width: var(--size);
      height: var(--size);
      left: var(--x);
      background-color: var(--bg);
      top:0;
      animation: am-blend var(--time) ease-in forwards;
    }
  }

}


@keyframes am-blend {
  75% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
    top: var(--to);
  }
}