CODEWITHSUNDEEP
csscss-transitions
Vladislav
Vladislav

Reputation: 1502

CSS transitions, moves by itself

The div moves by itself, a movement that I don't even want and didn't code.

Here is my problem:

I'm using CSS transitions like this (want to 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 I hover the background moves like I want, but, before hovering, on page load, the div moves by itself to the right and bottom, like 20 pixels (Why?)

There is a solution that worked, without any sense, but I don't want it like that.

If I put the following code inside html and tags it 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 I put all the code inside tags in html file it works (without self movement).

Anyone know what is happening? I will be very grateful, thanks.

Upvotes: 1

Views: 170

Answers (1)

GFP
GFP

Reputation: 260

I remember i had the same problem. The thing is, first the browser is setting .mobile to his own values, and then he's reading the css. So he has two values, his own and your css value, and this is transitioning. Try it out by deleting the css

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

And then look at what the browser is doing.

Upvotes: 1

Related Questions