What is going on here? [SOLVED]

Question

The bell slips to the bottom right and back again

Answer 1

as your animated element has already a transform (translate) applied to it, when you declare your rotation inside animation, you must repeat the translation along, else it is overrided:

@keyframes mainAnim {
33% {transform:rotate(45deg) translate(-50%,-50%);}
67% {transform:rotate(-45deg) translate(-50%,-50%);}
}

and you probably want to move the rotation origin to something like:

transform-origin:0 0;

or

transform-origin:0 -50%;

to your #bell-icon rules ;)

Answer 2

Oh that makes alot of sense visph Thanks for your help!