背景图像有过渡时间但位置过渡没有答案

【问题标题】：Background image has transition time but position transition does not背景图像有过渡时间但位置过渡没有
【发布时间】：2016-08-12 02:22:38
【问题描述】：

所以我希望在悬停时更改 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>

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

谢谢！很棒而且很容易修复！