Animation with css

Question

I would like to translate a div from 0 to 100% of the screen and as it travels I want to make it rotate (with transform-origin set to bottom center)
I mean, it's going to move from left to right and spin a couple times around its lower point in the center
please and thank you very much

Answer 1

just like this

div{
width:200px;
height:200px;
border:1px solid red;
position:absolute ;
border-radius:100px;
animation:rotar 2s infinite linear;
transform-origin:bottom center;

}
@keyframes rotar{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
but if I add translate to the keyframes the animation goes crazy hahaha I think its because of the transform-origin that doesn't change or something
If you find out let me know

Answer 2

Add a parent div to handle move animation
https://code.sololearn.com/W65EP7HqKuCD/?ref=app

Answer 3

No way hahaha that's true, with a container thank you man, I did it too check it out https://code.sololearn.com/Wb7vcy2Indbr/#html I realized that if you say rotate and then translate the coordinates also change so "X" will be pointing in another direction and when you say translate and then rotates it works as I expected.

Answer 4

I knew how to use keyframes thanks, I was having troubles with the combination of rotate and translate