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;

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