CSS animation for both spinning and moving a ball simultaneously-CodePudding

I have a simple react app with a div containing an SVG ball image. Upon hovering on the image, I want it to rotate and move left simultaneously smoothly. When hover state is false, I want it to rotate and roll back to its initial position.

I'm struggling to combine both effects in CSS.

BallRoll.js

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

I'm a bit lost on the css, can't figure out a proper way to combine everything. 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;
    }

They are not perfect, work fine individually, but not together. Any better suggestions and help?

CodePudding user response：

Here is a working example.

One thing to note is that if you apply the affect only on hover of the ball, then as soon as the ball moves the hover will end and it will go back to non-hover state, causing just a quick flicker. For that reason I activate the animation when the ball holder is hovered.

.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 >
  <div ></div>
</div>

CodePudding user response：

If you create two separate containers, you can animate them separately

* {
  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>