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中并标记它，它就可以工作，而不会自行移动：.移动{背景：url（../img/galaxy.png）不重复70px 32px；高度：480px；页边空白：-90px；页边距底部：-70px；位置：相对；}

此外，如果我把所有的代码都放在html文件中的标签中，它就可以工作（没有自我移动）。

有人知道发生了什么吗？我将非常感激，谢谢。

Answer 1

我记得我也遇到过同样的问题。问题是，首先浏览器将.mobile设置为他自己的值，然后他读取css。所以他有两个值，他自己的值和你的css值，这是在转换。尝试删除css

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

然后看看浏览器在做什么。