如何将动画从Angular切换到css

<button class="fade-in-out">按钮</button>

.fade-in-out {
  animation: fade 1s ease-in-out infinite alternate;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css'],
  animations: [
    trigger('fade', [
      state('void', style({ opacity: 0 })),
      transition(':enter, :leave', [
        animate(1000)
      ])
    ])
  ]
})
export class ButtonComponent {
  isShown = false;

  toggleAnimation() {
    this.isShown = !this.isShown;
  }
}

<button [@fade]="isShown ? 'shown' : 'hidden'" (click)="toggleAnimation()">切换动画</button>