Why does this code move backwards?

Question

Could someone take a look at the CSS (@keydrames) and tell me why it moves positive then negative (it was regionally set to positive).
->

https://code.sololearn.com/WsjQP79m6XxH/?ref=app

Answer 1

I made some edits

https://code.sololearn.com/Wlm0Xsj5Cq4h/?ref=app

Answer 2

@keyframes learn{
100%{transform: rotateZ(360deg);
transform-origin:50% 100%;
}}

Answer 3

25% makes it stop and go back apparently