Html CSS动画：方块加载器

我需要做一个加载器。
该装载机由三个方形组成，它们像落在地板上的沉重箱子一样滚动

主要部分已经完成，但是这个动画有点棘手：当动画开始时，方块必须一起缩放，停止滚动，最后，方块需要缩小，同时完全消失

这里有一个代码笔：。
代码如下：

          .loader {
              height: 20vw;
              width: 20vw;
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto;
            }

            .loader::after {
              content: "";
              position: absolute;
              z-index: -1;
              top: 22%;
              bottom: 0;
              left: 0;
              right: 0;
              border-top: 2px dotted #ff0000;
              margin-top: -7%;
            }

            .square {
              position: absolute;
              top: 0;
              left: 0;
              display: block;
              bottom: 0.15vw;
              width: 0.15vw;
              height: 0.15vw;
              background-color: transparent;
            }

            .square:nth-child(1) {
              transform: scale(0.01, 0.01);
              border: 0.35vw solid #000000;
              animation-name: spin-scale-cube1;
              animation-duration: 3s;
              animation-delay: 0s;
              animation-timing-function: steps(6, 6);
              animation-iteration-count: infinite;
              z-index: 1;
            }

            .square:nth-child(2) {
              border: 0.35vw solid #DCDA15;
              animation-name: spin-scale-cube1;
              animation-duration: 3s;
              animation-delay: 0.08s;
              animation-timing-function: steps(6, 6);
              animation-iteration-count: infinite;
              z-index: -1;
            }

            .square:nth-child(3) {
              border: 0.35vw solid #00A2DE;
              animation-name: spin-scale-cube1;
              animation-duration: 3s;
              animation-delay: 0.18s;
              animation-timing-function: steps(5, 5);
              animation-iteration-count: infinite;
              z-index: 0;
            }

            .loader-text {
              color: #000000;
              text-align: center;
              font-family: "Arial", sans-serif;
              font-size: 3vw;
              margin-top: 27%;
            }

            .loader-text span {
              margin: 0;
              padding: 0;
              width: 0.3vw;
              display: inline-block;
              visibility: hidden;
            }

            .loader-text span:nth-child(1) {
              animation-name: blink-dot1;
              animation-duration: 3s;
              animation-delay: 0s;
              animation-timing-function: steps(4);
              animation-iteration-count: infinite;
            }

            .loader-text span:nth-child(2) {
              animation-name: blink-dot2;
              animation-duration: 3s;
              animation-delay: 0.1s;
              animation-timing-function: steps(4);
              animation-iteration-count: infinite;
            }

            .loader-text span:nth-child(3) {
              animation-name: blink-dot3;
              animation-duration: 3s;
              animation-delay: 0s;
              animation-timing-function: steps(4);
              animation-iteration-count: infinite;
            }

            .ground {
              border-bottom: 2px solid #ff0000;
            }

            @keyframes spin-scale-cube1 {
              0% {
                width: 0vw;
                height: 0vw;
                transform: translate(0vw, 0) rotate(0deg);
                transform-origin: bottom right;
              }
              1% {
                bottom: 1vw;
                width: 1vw;
                height: 1vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              2% {
                bottom: 1.5vw;
                width: 1.5vw;
                height: 1.5vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              3% {
                bottom: 2vw;
                width: 2vw;
                height: 2vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              4%,
              10% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              20% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(90deg);
              }
              20.01% {
                transform: translate(3.2vw, 0) rotate(0deg);
              }
              40% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(3.2vw, 0) rotate(90deg);
              }
              40.01% {
                transform: translate(6.4vw, 0) rotate(0deg);
              }
              60% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(6.4vw, 0) rotate(90deg);
              }
              60.01% {
                transform: translate(9.6vw, 0) rotate(0deg);
              }
              80% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(9.6vw, 0) rotate(90deg);
              }
              80.01% {
                transform: translate(12.8vw, 0) rotate(0deg);
              }
              90% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(12.8vw, 0) rotate(0deg);
              }
              90.01% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              91% {
                bottom: 1.5vw;
                width: 1.5vw;
                height: 1.5vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              93% {
                bottom: 1vw;
                width: 1vw;
                height: 1vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              95% {
                bottom: 0.5vw;
                width: 0.5vw;
                height: 0.5vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              97% {
                bottom: 0vw;
                width: 0vw;
                height: 0vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              100% {
                bottom: 0vw;
                width: 0vw;
                height: 0vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
            }

            @keyframes spin-scale-cube2 {
              0% {
                width: 0vw;
                height: 0vw;
                transform: translate(0vw, 0) rotate(0deg);
                transform-origin: bottom right;
              }
              1% {
                bottom: 1vw;
                width: 1vw;
                height: 1vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              2% {
                bottom: 1.5vw;
                width: 1.5vw;
                height: 1.5vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              3% {
                bottom: 2vw;
                width: 2vw;
                height: 2vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              4%,
              10% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              20% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(90deg);
              }
              20.01% {
                transform: translate(3.2vw, 0) rotate(0deg);
              }
              40% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(3.2vw, 0) rotate(90deg);
              }
              40.01% {
                transform: translate(6.4vw, 0) rotate(0deg);
              }
              60% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(6.4vw, 0) rotate(90deg);
              }
              60.01% {
                transform: translate(9.6vw, 0) rotate(0deg);
              }
              80% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(9.6vw, 0) rotate(90deg);
              }
              80.01% {
                transform: translate(12.8vw, 0) rotate(0deg);
              }
              90% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(12.8vw, 0) rotate(0deg);
              }
              90.01% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              91% {
                bottom: 1.5vw;
                width: 1.5vw;
                height: 1.5vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              93% {
                bottom: 1vw;
                width: 1vw;
                height: 1vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              95% {
                bottom: 0.5vw;
                width: 0.5vw;
                height: 0.5vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              97% {
                bottom: 0vw;
                width: 0vw;
                height: 0vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              100% {
                bottom: 0vw;
                width: 0vw;
                height: 0vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
            }

            @keyframes spin-scale-cube3 {
              0% {
                width: 0vw;
                height: 0vw;
                transform: translate(0vw, 0) rotate(0deg);
                transform-origin: bottom right;
              }
              1% {
                bottom: 1vw;
                width: 1vw;
                height: 1vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              2% {
                bottom: 1.5vw;
                width: 1.5vw;
                height: 1.5vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              3% {
                bottom: 2vw;
                width: 2vw;
                height: 2vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              4%,
              10% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(0deg);
              }
              20% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(0vw, 0) rotate(90deg);
              }
              20.01% {
                transform: translate(3.2vw, 0) rotate(0deg);
              }
              40% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(3.2vw, 0) rotate(90deg);
              }
              40.01% {
                transform: translate(6.4vw, 0) rotate(0deg);
              }
              60% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(6.4vw, 0) rotate(90deg);
              }
              60.01% {
                transform: translate(9.6vw, 0) rotate(0deg);
              }
              80% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(9.6vw, 0) rotate(90deg);
              }
              80.01% {
                transform: translate(12.8vw, 0) rotate(0deg);
              }
              85% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(12.8vw, 0) rotate(0deg);
              }
              90.01% {
                bottom: 2.5vw;
                width: 2.5vw;
                height: 2.5vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              91% {
                bottom: 1.5vw;
                width: 1.5vw;
                height: 1.5vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              93% {
                bottom: 1vw;
                width: 1vw;
                height: 1vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              95% {
                bottom: 0.5vw;
                width: 0.5vw;
                height: 0.5vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              97% {
                bottom: 0vw;
                width: 0vw;
                height: 0vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
              100% {
                bottom: 0vw;
                width: 0vw;
                height: 0vw;
                transform-origin: bottom right;
                transform: translate(16vw, 0) rotate(0deg);
              }
            }

            @keyframes blink-dot1 {
              0%,
              18% {
                visibility: hidden;
              }
              19% {
                visibility: hidden;
              }
              20% {
                visibility: visible;
              }
              100% {
                visibility: hidden;
              }
            }

            @keyframes blink-dot2 {
              0%,
              50% {
                visibility: hidden;
              }
              51% {
                visibility: hidden;
              }
              52% {
                visibility: visible;
              }
              100% {
                visibility: hidden;
              }
            }

            @keyframes blink-dot3 {
              0%,
              73% {
                visibility: hidden;
              }
              74% {
                visibility: hidden;
              }
              75% {
                visibility: visible;
              }
              100% {
                visibility: hidden;
              }
            }

<div class="loader">
<div class="square"></div>
<div class="square"></div>
 <div class="square"></div>
 <div class="loader-text">Loading
<span>.</span>
<span>.</span>
<span>.</span>
</div>
</div>

.loader{
高度：20vw；
宽度：20vw；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
.loader：：之后{
内容：“；
位置：绝对位置；
z指数：-1；
最高：22%；
底部：0；
左：0；
右：0；
边框顶部：2个点#ff0000；
利润率最高：-7%；
}
.广场{
位置：绝对位置；
排名：0；
左：0；
显示：块；
底部：0.15vw；
宽度：0.15vw；
高度：0.15vw；
背景色：透明；
}
.square:第n个孩子（1）{
变换：比例（0.01,0.01）；
边界：0.35vw固体#000000；
动画名称：spin-scale-cube1；
动画持续时间：3s；
动画延迟：0s；
动画定时功能：步骤（6,6）；
动画迭代次数：无限；
z指数：1；
}
.方：第n个孩子（2）{
边框：0.35vw实心#DCDA15；
动画名称：spin-scale-cube1；
动画持续时间：3s；
动画延迟：0.08s；
动画定时功能：步骤（6,6）；
动画迭代次数：无限；
z指数：-1；
}
.方：第n个孩子（3）{
边框：0.35vw实心#00A2DE；
动画名称：spin-scale-cube1；
动画持续时间：3s；
动画延迟：0.18秒；
动画定时功能：步骤（5,5）；
动画迭代次数：无限；
z指数：0；
}
.加载器文本{
颜色：#000000；
文本对齐：居中；
字体系列：“Arial”，无衬线；
字体大小：3vw；
利润率最高：27%；
}
.loader文本范围{
保证金：0；
填充：0；
宽度：0.3vw；
显示：内联块；
可见性：隐藏；
}
.loader文本范围：第n个子项（1）{
动画名称：blink-dot1；
动画持续时间：3s；
动画延迟：0s；
动画定时功能：步骤（4）；
动画迭代次数：无限；
}
.loader文本范围：第n个子项（2）{
动画名称：blink-dot2；
动画持续时间：3s；
动画延迟：0.1s；
动画定时功能：步骤（4）；
动画迭代次数：无限；
}
.loader文本范围：第n个子项（3）{
动画名称：blink-dot3；
动画持续时间：3s；
动画延迟：0s；
动画定时功能：步骤（4）；
动画迭代次数：无限；
}
.场地{
边框底部：2个实心#ff0000；
}
@关键帧旋转缩放立方体1{
0% {
宽度：0vw；
高度：0vw；
变换：平移（0vw，0）旋转（0deg）；
变换原点：右下角；
}
1% {
底部：1vw；
宽度：1vw；
高度：1vw；
变换原点：右下角；
变换：平移（0vw，0）旋转（0deg）；
}
2% {
底部：1.5vw；
宽度：1.5vw；
高度：1.5vw；
变换原点：右下角；
变换：平移（0vw，0）旋转（0deg）；
}
3% {
底部：2vw；
宽度：2vw；
高度：2vw；
变换原点：右下角；
变换：平移（0vw，0）旋转（0deg）；
}
4%,
10% {
底部：2.5vw；
宽度：2.5vw；
高度：2.5vw；
变换原点：右下角；
变换：平移（0vw，0）旋转（0deg）；
}
20% {
底部：2.5vw；
宽度：2.5vw；
高度：2.5vw；
变换原点：右下角；
变换：平移（0vw，0）旋转（90度）；
}
20.01% {
变换：平移（3.2vw，0）旋转（0度）；
}
40% {
底部：2.5vw；
宽度：2.5vw；
高度：2.5vw；
变换原点：右下角；
变换：平移（3.2vw，0）旋转（90度）；
}
40.01% {
变换：平移（6.4vw，0）旋转（0度）；
}
60% {
底部：2.5vw；
宽度：2.5vw；
高度：2.5vw；
变换原点：右下角；
变换：平移（6.4vw，0）旋转（90度）；
}
60.01% {
变换：平移（9.6vw，0）旋转（0度）；
}
80% {
底部：2.5vw；
宽度：2.5vw；
高度：2.5vw；
     .loader {
         height: 20vw;
         width: 20vw;
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         margin: auto;
       }

       .loader::after {
         content: "";
         position: absolute;
         z-index: -1;
         top: 22%;
         bottom: 0;
         left: 0;
         right: 0;
         border-top: 2px dotted #ff0000;
         margin-top: -7%;
       }

       .square {
         position: absolute;
         top: 0;
         left: 0;
         display: block;
         bottom: 0.15vw;
         width: 0.15vw;
         height: 0.15vw;
         background-color: transparent;
       }

       .square:nth-child(1) {
         transform-origin: bottom right;
         border: 0.35vw solid #000000;
         animation-name: spin-scale-cube1;
         animation-duration: 3s;
         animation-delay: 0s;
         animation-timing-function: ease;
         animation-iteration-count: infinite;
         z-index: 1;
       }

       .square:nth-child(2) {
         border: 0.35vw solid #DCDA15;
         animation-name: spin-scale-cube2;
         animation-duration: 3s;
         animation-delay: 0s;
         animation-timing-function: linear;
         animation-iteration-count: infinite;
         z-index: 0;
       }

       .square:nth-child(3) {
         border: 0.35vw solid #00A2DE;
         animation-name: spin-scale-cube3;
         animation-duration: 3s;
         animation-delay: 0s;
         animation-timing-function: linear;
         animation-iteration-count: infinite;
         z-index: -1;
       }

       .loader-text {
         color: #000000;
         text-align: center;
         font-family: "Arial", sans-serif;
         font-size: 3vw;
         margin-top: 27%;
       }

       .loader-text span {
         margin: 0;
         padding: 0;
         width: 0.3vw;
         display: inline-block;
         visibility: hidden;
       }

       .loader-text span:nth-child(1) {
         animation-name: blink-dot1;
         animation-duration: 3s;
         animation-delay: 0s;
         animation-timing-function: ease;
         animation-iteration-count: infinite;
       }

       .loader-text span:nth-child(2) {
         animation-name: blink-dot2;
         animation-duration: 3s;
         animation-delay: 0s;
         animation-timing-function: linear;
         animation-iteration-count: infinite;
       }

       .loader-text span:nth-child(3) {
         animation-name: blink-dot3;
         animation-duration: 3s;
         animation-delay: 0s;
         animation-timing-function: linear;
         animation-iteration-count: infinite;
       }

       .ground {
         border-bottom: 2px solid #ff0000;
       }

       @keyframes spin-scale-cube1 {
         0% {
           bottom: 2.5vw;
           width: 0vw;
           height: 0vw;
           transform-origin: bottom center;
           transform: translate(0vw, 2.5vw) rotate(0deg);
         }
         4%,
         10% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(0vw, 0) rotate(0deg);
         }
         20% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(0vw, 0) rotate(90deg);
         }
         20.01% {
           transform: translate(3.2vw, 0) rotate(0deg);
         }
         40% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(3.2vw, 0) rotate(90deg);
         }
         40.01% {
           transform: translate(6.4vw, 0) rotate(0deg);
         }
         60% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(6.4vw, 0) rotate(90deg);
         }
         60.01% {
           transform: translate(9.6vw, 0) rotate(0deg);
         }
         80% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(9.6vw, 0) rotate(90deg);
         }
         80.01% {
           transform: translate(12.8vw, 0) rotate(0deg);
         }
         94% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(12.8vw, 0) rotate(0deg);
         }
         94.01% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(12.8vw, 0) rotate(0deg);
         }
         100% {
           bottom: 0vw;
           width: 0vw;
           height: 0vw;
           transform-origin: bottom right;
           transform: translate(14.05vw, 2.5vw) rotate(0deg);
         }
       }

       @keyframes spin-scale-cube2 {
         0% {
           width: 0vw;
           height: 0vw;
           transform: translate(0vw, 2.5vw) rotate(0deg);
           transform-origin: bottom right;
         }
         4%,
         13% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(0vw, 0) rotate(0deg);
         }
         23% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(0vw, 0) rotate(90deg);
         }

         23.01% {
           transform: translate(3.2vw, 0) rotate(0deg);
         }
         43% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(3.2vw, 0) rotate(90deg);
         }
         43.01% {
           transform: translate(6.4vw, 0) rotate(0deg);
         }
         63% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(6.4vw, 0) rotate(90deg);
         }
         63.01% {
           transform: translate(9.6vw, 0) rotate(0deg);
         }
         83% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(9.6vw, 0) rotate(90deg);
         }
         83.01% {
           transform: translate(12.8vw, 0) rotate(0deg);
         }
         94% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(12.8vw, 0) rotate(0deg);
         }
         94.01% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(12.8vw, 0) rotate(0deg);
         }
         100% {
           bottom: 0vw;
           width: 0vw;
           height: 0vw;
           transform-origin: bottom right;
          transform: translate(14.05vw, 2.5vw) rotate(0deg);
         }
       }

       @keyframes spin-scale-cube3 {
         0% {
           width: 0vw;
           height: 0vw;
           transform: translate(0vw, 2.5vw) rotate(0deg);
           transform-origin: bottom right;
         }
         4%,
         18% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(0vw, 0) rotate(0deg);
         }
         28% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(0vw, 0) rotate(90deg);
         }
         28.01% {
           transform: translate(3.2vw, 0) rotate(0deg);
         }
         48% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(3.2vw, 0) rotate(90deg);
         }
         48.01% {
           transform: translate(6.4vw, 0) rotate(0deg);
         }
         68% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(6.4vw, 0) rotate(90deg);
         }
         68.01% {
           transform: translate(9.6vw, 0) rotate(0deg);
         }
         88% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(9.6vw, 0) rotate(90deg);
         }
         88.01% {
           transform: translate(12.8vw, 0) rotate(0deg);
         }
         94% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(12.8vw, 0) rotate(0deg);
         }
         94.01% {
           bottom: 2.5vw;
           width: 2.5vw;
           height: 2.5vw;
           transform-origin: bottom right;
           transform: translate(12.8vw, 0) rotate(0deg);
         }
         100% {
           bottom: 0vw;
           width: 0vw;
           height: 0vw;
           transform-origin: bottom right;
           transform: translate(14.05vw, 2.5vw) rotate(0deg);
         }
       }

       @keyframes blink-dot1 {
         0%,
         10% {
           visibility: hidden;
         }
         20.01% {
           visibility: visible;
         }
         40% {
           visibility: visible;
         }
         60% {
           visibility: visible;
         }
         100% {
           visibility: hidden;
         }
       }

       @keyframes blink-dot2 {
         0%,
         50% {
           visibility: hidden;
         }
         51% {
           visibility: hidden;
         }
         52% {
           visibility: visible;
         }
         100% {
           visibility: hidden;
         }
       }

       @keyframes blink-dot3 {
         0%,
         73% {
           visibility: hidden;
         }
         74% {
           visibility: hidden;
         }
         75% {
           visibility: visible;
         }
         100% {
           visibility: hidden;
         }
       }