Как я могу написать этот переход CSS в угловой 5 анимации

Question

Я новичок в угловых и возникающих проблемах при преобразовании перехода CSS в угловую анимацию, вот что мне нужно, чтобы преобразовать его в угловую анимацию с использованием углового ключевого кадра:

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

и мой угловой код такой, как показано ниже, но не получаю точное поведение

animations: [
    trigger('messageState', [
        transition('void => *', [           
            animate("1000ms cubic-bezier(0.215, 0.61, 0.355, 1)", keyframes([
              style({
                transform: 'translate3d(0, 3000px, 0)',
                opacity:0,
                offset:0,                
              }),
              style({
                transform: 'translate3d(0, -20px, 0)',
                opacity:1,
                offset:0.6
              }),
              style({
                transform: ' translate3d(0, 10px, 0)',               
                offset:0.75
              }),
              style({
                transform: ' translate3d(0, 10px, 0)',               
                offset:0.9
              }),
              style({
                transform: 'translate3d(0, 0, 0)',
               // background: 'rgba(0, 0, 0, 0.3)',               
                offset:1
              }),
            ]))
        ]),
        transition('* => void', [
            animate(1000, keyframes([
              style({
                background:'transparent',
                offset:0
              }),
              style({
                transform: 'translate3d(0, 10px, 0)',
                offset:0.2
              }),
              style({
                transform: 'translate3d(0, -20px, 0)',
                offset:0.4
              }),
              style({
                transform: 'translate3d(0, 2000px, 0)',
                offset:1
              }),
            ]))   
        ])
    ])
]

CSS-анимация очень плавная, в то время как угловая анимация не так хороша, как CSS-анимация, то, что я делаю, я борюсь с этим за последние 2 дня.