CSS关键帧动画优雅完成

Question

我有一个旋转的图标的动画。

它可能在任何意想不到的时间完成。

所以我的问题是：有什么方法可以在停止旋转之前，用纯CSS来完成它的结束关键帧？有什么方法可以在停止旋转之前，使用纯CSS来完成它的结束关键帧？

我现在就有这样的代码。

我试过过渡，但效果不好

.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的解决方案。