Once you have the position of the cursor over the html element containing your animation, you can use those numbers (x,y) to determine a rotation value to the "seesaw like image" which you will need to calculate and slide the object were it need to be.
It is not too complex but id does require some knowledge to accomplish this.
I would advise against going the CSS road because you cannot know where the sliding object is to animate to were it should go, nor you will get the position of the cursor other than ":hover" a defined area or out. Which doesn't give you much to work with. And there is no way of knowing the inclination of the seesaw to have an object slide as if it were on top of it and not floating over it or under it. If you want a smooth transition, CSS is not the way.
What you can do as an alternative is to do it "old school" as if you were doing a flipbook. This way you do not have to calculate anything too complex and just control the frame you visualize with the position of the cursor (JavaScript) or maybe some smart css (still not the best choice), just adding a frame or subtracting one. I have done similar animations using sprites.
Hope this helps
FJM
You can check here
https://www.udemy.com/blog/html-5-animat...
I would use Javascript for this probably.
I'm trying to make a balance beam, almost like a seesaw with objects on each end. I want the user to use the most hover to balance or affect whatever end of the beam they float over. For example, if they moved their cursor downward on the left side of the beam, the left side would go down and the right side would go up making the object on the right slide downward. I really need it done, please help. What program or language should I use as well?
