html - 背景图片有过渡时间但位置过渡没有

Question

所以我希望在悬停时更改 div 的(按钮)背景图像，并在悬停时向左移动 20px，向上移动 20px。现在，当我悬停 div 时，背景图像会像我想要的那样在 0.7 秒的过渡中发生变化，但位置变化没有过渡时间。对此的任何帮助都很棒

    .buttons:hover{
    background: transparent;
    background-image: url('image2');
    right: 20px;
    top: -20px;
    }
    .buttons{
    position: relative;
    width:95%;
    height: 145px;
    background-image: url('image1');
    -webkit-transition: all 0.7s ease-out;
       -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
         -o-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
    }
    .buttons h3{
    position: relative;
    top: 50px;
    }
    .buttoncontainer{
    width: 100%;
    text-align: center;
    }
    .buttoncontainer a{
    text-decoration: none;
    }

<div class="buttoncontainer">
	<a href="#">
		<div class="buttons">
			<h3 style="font-family: helvetica;color:#13506D;">General IP Services <img src="arrow.png" alt="">
			</h3>
		</div>
	</a>
</div>

Answer 1

为了使动画正常工作，它需要从某物到您的新位置。在转换之前定义top: 0; 和right: 0;。

.buttons:hover{
background: transparent;
background-image: url('image2');
right: 20px;
top: -20px;
}
.buttons{
position: relative;
width:95%;
height: 145px;
right: 0;        /* Define right */
top: 0;          /* Define top */
background-image: url('image1');
-webkit-transition: all 0.7s ease-out;
   -moz-transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;
     -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;
}
.buttons h3{
position: relative;
top: 50px;
}
.buttoncontainer{
width: 100%;
text-align: center;
}
.buttoncontainer a{
text-decoration: none;
}

<div class="buttoncontainer">
<a href="#">
    <div class="buttons">
        <h3 style="font-family: helvetica;color:#13506D;">General IP Services <img src="arrow.png" alt="">
        </h3>
    </div>
</a>
</div>