CSS анимация ключевых кадров изящно завершена

Question

У меня есть анимация вращающегося значка.

Это может быть закончено в любое неожиданное время.

Итак, мой вопрос является. Есть ли способ использовать чистый CSS для завершения sh его до конечного ключевого кадра перед остановкой вращения?

У меня есть этот код прямо сейчас:

Я пробовал переход без хорошего результата :

.loop {
  transition: 400ms;
  transform: rotate(180deg);

  &:hover {
    animation: rotation 400ms infinite linear;
  }
}

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

Answer 1

Я написал эту директиву, которая работает так, как я ожидал.

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appRotate]'
})
export class RotateDirective {
  speedQueue: Array<number>= [];

  _speed = 0;
  @Input('appRotate') set speed(value: number = 0) {
    const steps = 5;
    const step = (value - this._speed) / steps;
    this.speedQueue = new Array(steps).fill(0).map((_, i) => (i+1) * step + this._speed);
  }

  constructor(private el: ElementRef) {
    let rot = 0;
    const loop = () => {
      if (this.speedQueue.length) {
        this._speed = this.speedQueue.shift();
      }
      rot += this._speed * 360;
      this.el.nativeElement.style.transform = `rotate(${rot % 360}deg) scaleX(-1)`;
      requestAnimationFrame(loop);
    };
    requestAnimationFrame(loop);
  }

}

<span class="material-icons loop" [appRotate]="speed">
  loop
</span>

<div>
  <input type="radio" name="speed" (click)="speed=0">0
  <input type="radio" name="speed" (click)="speed=0.02">2%
  <input type="radio" name="speed" (click)="speed=0.08">8%
</div>

Это работает так:

Это не CSS решение.