CSS keyframes animation gracefully finished

user_3573210 0
Viewed 71

I have animation of icon that is rotating.

enter image description here

It may be finished any unexpected time.

So my question is. Is there any way using pure CSS to finish it to the end keyframe before stop rotating?

I have this code right now:

I did tried transition without any good result:


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

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

@keyframes rotation {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}
keyframe transform rotation animation css
1 Answers

I wrote this directive, that works as I expect.

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>

It works like that:

enter image description here

It is not CSS solution.

user_35732100
Related