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； position:relative；

另外，如果我将所有代码放在 html 文件中的标签内，它就可以工作(无需自行移动)。

有人知道这是怎么回事吗？我将非常感激，谢谢。

Answer 1

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

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

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