背景画像には遷移時間がありますが、位置の遷移はありません

Question

私は、ホバーでdivの（ボタン）背景画像を変更し、ホバー上で20px左と20px上に移動させたいと考えています。今私がdivをホバリングすると、背景画像は0.7sの遷移で変化しますが、位置の変化には遷移時間はありません。アニメーションが動作するために、この上の任意のヘルプは、それが何か、新しい場所からを移行する必要がある、ために

.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"> 
 
\t <a href="#"> 
 
\t \t <div class="buttons"> 
 
\t \t \t <h3 style="font-family: helvetica;color:#13506D;">General IP Services <img src="arrow.png" alt=""> 
 
\t \t \t </h3> 
 
\t \t </div> 
 
\t </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>