同时旋转和移动球的CSS动画

Question

我有一个简单的react应用程序，其中有一个包含SVG球图像的div。悬停在图像上时，我希望它同时平滑地旋转和向左移动。当悬停状态为false时，我希望它旋转并回滚到初始位置。

我很难在CSS中结合这两种效果。

BallRoll.js

<div className="ball-holder">
<img
src={rollingBall}
loading="lazy"
width="223"
alt="rolling Ball"
className="ball"
/>
</div>

我有点迷上了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;
}

他们并不完美，单独工作很好，但不能一起工作。有什么更好的建议和帮助吗？

Answer 1

这里是一个工作示例。

需要注意的一点是，如果你只在球悬停时施加影响，那么球一移动，悬停就会结束，它会回到非悬停状态，只会引起快速闪烁。出于这个原因，当球支架悬停时，我会激活动画。

.ball {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(teal, #000);
}
.ball {
display: block;
transition: all 2s;
}
.ball-holder:hover .ball {
transform: translateX(calc(100vw - 80px)) rotate(360deg);
}

<div class="ball-holder">
<div class="ball"></div>
</div>

Answer 2

如果您创建两个单独的容器，您可以分别为它们设置动画

* {
box-sizing: border-box;
}
body {
margin: 0; padding:0;
font-family: system-ui, sans-serif;
color: black;
background-color: white;
}
#ball {
animation: roll 5s linear; 
}
#ball-holder {
animation: moveLeft 5s linear; 
}
@keyframes moveLeft {
0%{
transform: translateX(0px);
}
50%{
transform: translateX(300px);
}
100%{
transform: translateX(0px);
}
}
@keyframes roll {
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(360deg);
}
100%{
transform: rotate(0deg);
}
}

<div id="ball-holder">
<img
id="ball"
src="https://media.istockphoto.com/photos/soccer-ball-isolated-3d-rendering-picture-id1257575611?k=20&m=1257575611&s=612x612&w=0&h=g530fFJspT42xFGY7HycLvpBKLXpJ2XAkKCRyY-SK80="
width="200"
alt="rolling Ball"
className="ball"
/>
</div>