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);
  }