Остановить анимацию при наведении ⇐ CSS

[Anonymous]

Я хотел бы применить активное преобразование (вращение) до тех пор, пока состояние наведения не исчезнет. К сожалению, после поворота мое изображение сразу же возвращает исходное значение поворота (на 0 градусов), даже если указатель мыши все еще находится над моим изображением.
Я видел много похожих проблем и ответов, но ни одного из них. решают мою проблему.

Код: Выделить всё

#centerDiv{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rotation{
transform: rotate(0deg);
animation-play-state:paused;
}
.rotation:hover{
animation-name: rotation;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction:normal;
animation-play-state:running;
}
@keyframes rotation{
from{
transform: rotate(0deg);
}
to{
transform: rotate(-10deg);
}
}

Код: Выделить всё

[img]https://dummyimage.com/200x200/aaaaaa/fff[/img]

Подробнее здесь: https://stackoverflow.com/questions/747 ... n-on-hover