CSS keyframes animation gracefully finished - css

Question

I have animation of icon that is rotating.
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);
}
}

Answer 1

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:
It is not CSS solution.