如何在动画的其余部分在 CSS 中完成时保持动画元素的最终状态

Question

我正在尝试创建如下动画

动画说明。

1. 红色条的高度增加到 50 像素。
2. 当红色条保持在第 1 步设置的高度时，黄色条的高度增加到 100 像素。
3. 当黄色条保持在第 2 步设置的高度时，绿色条的高度增加到 75 像素。
4. 当绿条保持在第 3 步设置的高度时，下一个也是最后一个绿条高度增加到 75 像素。

   问题是我不能让酒吧保持在它的高度。所以我制作了另一个动画，它有点相同，但不是 100%。它在下面。

   下面是我的代码和代码笔链接。

   <svg xmlns="http://www.w3.org/2000/svg" class="equilizer" viewBox="0 0 128 128">
     <g>
       <title>Audio Equilizer</title>
       <rect class="bar bar-1" transform="translate(0,0)" y="15" rx="10" fill="#416031"></rect>
       <rect class="bar bar-2" transform="translate(25,0)" y="15" rx="10" fill="#416031"></rect>
       <rect class="bar bar-3" transform="translate(50,0)" y="15" rx="10" fill="#e5a32b"></rect>
       <rect class="bar bar-4" transform="translate(75,0)" y="15" rx="10" fill="#ad1e23"></rect>
     </g>
   </svg>
   

   和 CSS

   .equilizer {
     height: 100px;
     width: 100px;
     transform: rotate(180deg);
   }
   
   .bar {
     width: 18px;
   }
   
   .bar-1 {
     animation: equalize4 1.5s 0s infinite;
   }
   
   .bar-2 {
     animation: equalize3 1.5s 0s infinite; 
   }
   
   .bar-3 {
     animation: equalize2 1.5s 0s infinite;
   }
   
   .bar-4 {
     animation: equalize1 1.5s 0s infinite;
   }
   
   
   @keyframes equalize1 {
     0% {
       height: 0%;
     }
     100% {
       height: 25%;
     }
   }
   
   @keyframes equalize2{
     0% {
       height: 0%;
     }
     100% {
       height: 50%;
     }
   }
   
   @keyframes equalize3{
     0% {
       height: 0%;
     }
     100% {
       height: 37.5%;
     }
   }
   
   @keyframes equalize4{
     0% {
       height: 0%;
     }
     100% {
       height: 37.5%;
     }
   }
   

   https://codepen.io/ayeshnipun/pen/gOKPXeX

   我怎样才能达到上述（图1）的结果？

Answer 1

只需将animimation-delay 添加到条形并保持条形的最终状态（高度）：

...

.bar-1 {
  animation: equalize4 1.5s 0s infinite;
  animation-delay: 1.25s;
}

.bar-2 {
  animation: equalize3 1.5s 0s infinite; 
  animation-delay: 1s;
}

.bar-3 {
  animation: equalize2 1.5s 0s infinite;
  animation-delay: .75s;
}

.bar-4 {
  animation: equalize1 1.5s 0s infinite;
  animation-delay: .5s;
}


@keyframes equalize1 {
  0% {
    height: 0%;
  }
  50% {
    height: 25%;
  }
  100% {
    height: 0%;
  }
}

@keyframes equalize2{
  0% {
    height: 0%;
  }
  50% {
    height: 50%;
  }
  100% {
    height: 0%;
  }
}

@keyframes equalize3{
  0% {
    height: 0%;
  }
  50% {
    height: 37.5%;
  }
  100% {
    height: 0%;
  }
}

@keyframes equalize4{
  0% {
    height: 0%;
  }
  50% {
    height: 37.5%;
  }
  100% {
    height: 0%;
  }
}

...

这是密码笔：https://codepen.io/mavyfaby/pen/eYKJyON