Переходы CSS, перемещение само по себе

Question

Div движется само по себе, движение, которое я даже не хочу и не кодировал.

Вот моя проблема:

Я использую CSS переходы, как это (требуется переместить фоновое изображение):

.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; 
} 

Это работает, когда я парить фоновые шаги, как я хочу, но , перед зависанием, при загрузке страницы, div перемещается сам по себе вправо и снизу, как 20 пикселей (почему?)

Существует решение, которое сработало, без всякого смысла, но я не хочу, чтобы это было так ,

Если я ставлю следующий код внутри HTML и теги он работает, без самостоятельного перемещения: .mobile { фон: URL (../ IMG/galaxy.png) не повторять 70px 32px; высота: 480 пикселей; margin-top: -90px; margin-bottom: -70px; позиция: относительная; }

Также, если я поместил весь код внутри тегов в html-файл, он работает (без самодвижения).

Кто-нибудь знает, что происходит? Я буду очень благодарен, спасибо.

Answer 1

Помню, у меня была такая же проблема. Дело в том, что сначала браузер устанавливает .mobile в свои собственные значения, а затем он читает css. Таким образом, он имеет две ценности, свою собственную и вашу ценность css, и это происходит. Попробуйте это, сняв css

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

А затем посмотрите, что делает браузер.