如何在悬停状态下在angular中动态显示animate字体

<div (mouseenter)="startAnimation()" (mouseleave)="stopAnimation()">
  <span [ngClass]="{'animated': isHovering}">Animate Font</span>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  isHovering: boolean = false;

  startAnimation() {
    this.isHovering = true;
  }

  stopAnimation() {
    this.isHovering = false;
  }
}

@import '~animate.css';

.animated {
  animation-duration: 1s;
  animation-name: bounce;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}