Stuck with :hover

Stuck with :hover

I need some help with pseudoclass :hover. I have an object which I first
want to move to the right of the page, then to the bottom, them left, then
top and continue as a Clock and never stop. I can get it to right corner
but from there it will not move to the bottom direction and forward.
Please help:
Oppgave 5-1
#animWrap {
margin: 0px; height: 667px; width: 1366px; top: 0px; left:
0px; right: 0px; bottom: 0px; background-color:
rgb(255,105,180); position: absolute;
}
#Boks{
height: 150px; width: 150px; border-radius: 0%;
background-color: rgb(255,20,147); position: absolute; top: 0px;
left: 0px; transition: left 3s linear 0s, bottom 5s linear 2s;
}
#animWrap:hover #Boks{
height: 150px; width: 150; left: 1216px;
}
<section id="animWrap">
<div id="Boks"> </div>
</section>