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.
Comments
Post a Comment