CSS关键帧动画优雅完成答案

【问题标题】：CSS keyframes animation gracefully finishedCSS关键帧动画优雅完成
【发布时间】：2020-08-25 03:41:41
【问题描述】：

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

它可能会在任何意想不到的时间结束。

所以我的问题是。有没有什么办法在停止旋转之前使用纯 CSS 完成它到结束关键帧？

我现在有这个代码：

我确实尝试过过渡，但没有任何好的结果：


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

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

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

【问题讨论】：

请不要添加代码图像，它没用而且占用很多空间并且您已经添加了代码

标签： css animation rotation transform keyframe

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

【讨论】：