CSS-анимация для одновременного вращения и перемещения мяча. ⇐ CSS

[Anonymous]

У меня есть простое приложение реагирования с элементом div, содержащим изображение шара в формате SVG.
При наведении курсора на изображение я хочу, чтобы оно одновременно плавно вращалось и перемещалось влево.
Когда состояние наведения ложно, я хочу, чтобы он вращался и возвращался в исходное положение.
Я изо всех сил пытаюсь объединить оба эффекта в CSS.
BallRoll.js

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

[img]{rollingBall}
width="223"
alt="rolling Ball"
className="ball"
/>

Я немного запутался в CSS, не могу придумать, как правильно все объединить.
ball.css

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

.ball {
display: block;
transition: 1s ease-in-out;
}

.ball:hover {
animation: animate2 5s linear;
}
@keyframes animate2 {
0%{
transform: rotate(0deg);
left:0;
}
50%{
transform: rotate(360deg);
left:calc(100% - 50px);
}
100%{
transform: rotate(0deg);
left:0;
}

Они не идеальны, по отдельности работают нормально, но не вместе. Есть ли лучшие предложения и помощь?

Подробнее здесь: https://stackoverflow.com/questions/733 ... ltaneously