Как анимировать список ионов синхронно с ack-контейнером?

Question

Когда условие showAck становится истинным, оно сначала создает пустое пространство над элементами списка ионов, сдвигая его вниз, и отображает анимацию. Как только анимация завершается, она сдвигает ионПеречислите элементы наверх.Все это очень резко, мне нужно сделать сдвиг элементов списка ионов с анимацией синхронно с ack-контейнером.

HTML

<div *ngIf="showAck" class="ack-container">

    <span>
      Success! Your file has been created
    </span>

  </div>

  <ion-list>
     // ...........
  </ion-list>

css

@keyframes ack-success-show {

    0% { transform: translate(0, 0) }
    5% { transform: translate(0, 11px) }
    15% { transform: translate(0, 22px) }
    20% { transform: translate(0, 33px) }
    25%, 30%, 35%, 40%, 45%, 50%, 60%, 70% { transform: translate(0, 45px) }
    80%  { transform: translate(0, -11px) }
    85%  { transform: translate(0, -22px) }
    90%  { transform: translate(0, -33px) }
    100%  { transform: translate(0, -44px) }
}
.ack-container{
    position: relative;    
    left: 0;
    top: -44px;
    z-index: 2;
    width: 100%;
    background: $green-ack;
    opacity: 1.0;
    display: flex;
    justify-content: flex-start;
    animation-name: ack-success-show;
    animation-direction: reverse;
    animation-duration: 5s;
    animation-timing-function: linear;
}