CSS3过渡仅适用一次

Question

我需要为刷新图标设置动画，以便在单击它时旋转它。我找到了一种通过CSS做到这一点的方法。

css文件

.refresh:focus .mat-icon {
  animation: rotate 2s ease-in-out;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

html文件

              <button mat-icon-button class="refresh" color="primary" (click)="refreshTableFkeys()">
                <mat-icon aria-label="Example icon-button with a heart icon">refresh</mat-icon>
              </button>
              <button mat-icon-button color="primary" (click)="addNewFkey()">
                <mat-icon aria-label="Example icon-button with a heart icon">add</mat-icon>
              </button>

当我单击按钮时，图标旋转一次。当我再次单击它以再次刷新时，动画将停止工作。如何使每次点击都触发动画？

谢谢。

编辑： 打字稿

  refreshTableFkeys() {
    this.dataSource_Fkeys.paginator._changePageSize(this.dataSource_Fkeys.paginator.pageSize);
  }