Transform a scss animation to fit the angular animations

Hello, I need to put in my angular animations the following scss animation:

0% {
    opacity: 0;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}
100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

My trigger:

 trigger('fadeInUp', [
      state('true', style({
        opacity: '0',
        transform: 'translate3d(0,100%,0)'
      })),
      transition('false => true', animate('1s'))
    ])

My target div:

<div hidden [@fadeInUp]="menub2w" class="teste">

    <div class="col-12 alinhaSideNav">
        <span class="tipografianivel2">Mensagens</span>
    </div>

    <div class="col-12 alinhaSideNav">
        <span class="tipografianivel2">Reclamações</span>
    </div>

    <div class="col-12 alinhaSideNav">
        <span class="tipografianivel2">Anúncios</span>
    </div>

</div>

I put opacity 0 in this div, to change the animation ...

 .teste{
     opacity: 0;
 }