CSS3 전환을 사용하여 이미지 주위에서 요소를 독립적으로 움직이게하려면 어떻게해야합니까?

Question

<div>을 올렸을 때이 이미지 내에서 이미지를 만들기 위해 CSS3 전환을 사용하려고합니다. <div> 위쪽으로 10 픽셀 이동합니다. Firefox에서 잘 작동하지만 Chrome 및 Safari에서 볼 때 <h3> 및 <p> 요소가 약간 위아래로 흔들립니다.

이 내 CSS입니다 :

<div id="box"> 
    <a href="#"> 
     <img src="images/payment_icon.png" width="114" height="115" border="0" /> 
     <h3>Customizable Campaign Pages</h3> 
     <p>Tell your story with images, video, rich text and social updates<b class="caret"></b></p> 
    </a> 
</div> 

어떤 아이디어 :

.feature-table #box { 
    width: 325px; 
    height: 372px; 
    margin-right: 20px; 
    float: left; 
} 

.feature-table a { 
    display: block; 
    width: 325px; 
    height: 372px; 
} 

.feature-table a img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 54px; 
    padding-bottom: 40px; 
    -moz-transition: all 0.3s linear; 
    -webkit-transition: all 0.3s linear; 
    transition: all 0.3s linear; 
} 

.feature-table a: hover img { 
    padding-top: 44px; 
    padding-bottom: 50px; 
} 

.feature-table a h3 { 
    font-family: 'GothamBold', sans-serif; 
    font-size: 30px; 
    color: #3d3d3d; 
    text-align: center; 
    text-decoration: none; 
    margin: 0; 
    padding: 0 25px; 
} 

.feature-table a: hover h3 { 
    color: #f6ce4f; 
} 

.feature-table a { 
    text-decoration: none; 
} 

.feature-table p { 
    font-family: 'GothamLight', sans-serif; 
    font-size: 14.5px; 
    color: #949494; 
    text-align: center; 
    padding: 10px 28px; 
} 

.feature-table .caret { 
    border-top: 5px solid #fff; 
    border-bottom: 5px solid #fff; 
    border-left: 5px solid #ffc235; 
    content: ""; 
    display: inline-block; 
    height: 0; 
    width: 0; 
    margin-left: 10px; 
} 

이 내 HTML의 일부인가?

Answer 1

현재 레이아웃에 영향을주는 2 개의 다른 속성에 애니메이션을 적용하기 때문에 성능 문제가 발생할 수 있습니다.
이상적인 해결책은 다른 요소에 영향을주지 않는 특정 소품을 사용하는 것입니다. 귀하의 경우에는, 이것은 relative에 이미지의 위치를 ​​설정 한 후, top 속성을 사용하여 수행 할 수 있습니다 http://jsfiddle.net/p7Lxz/