css3 - CSS transitions, moves by itself -

the div moves itself, movement don't want , didn't code.

here problem:

i'm using css transitions (want move background image):

.mobile{ background: url(../img/galaxy.png) no-repeat 70px 32px; height: 480px; margin-top: -90px; margin-bottom: -70px; position: relative; }  .mobile.animate { -webkit-transition: background-position 1s linear; -moz-transition: background-position 1s linear; -o-transition: background-position 1s linear; -ms-transition: background-position 1s linear; } .mobile:hover { background-position: 70px 20px; } 

it works, when hover background moves want, but, before hovering, on page load, div moves right , bottom, 20 pixels (why?)

there solution worked, without sense, don't want that.

if put following code inside html , tags works, without self moving: .mobile{ background: url(../img/galaxy.png) no-repeat 70px 32px; height: 480px; margin-top: -90px; margin-bottom: -70px; position: relative; }

also if put code inside tags in html file works (without self movement).

anyone know happening? grateful, thanks.

i remember had same problem. thing is, first browser setting .mobile own values, , he's reading css. has 2 values, own , css value, , transitioning. try out deleting css

margin-top: -90px; margin-bottom: -70px; 

and @ browser doing.