CSS動畫重置轉換爲起始位置

Question

http://codepen.io/anon/pen/DCfEI

.card { 
    &:hover { 
    .card_content_icon { 
    @include translateX(50px); 
    } 
    } 
    .card_content { 
    position: relative; 
    text-align: center; 
    margin: 0 auto; 

    .card_content_icon { 
     position: relative; 
     @include transition(-webkit-transform .6s); 
    } 
    } 
} 

在懸停我動畫使用CSS過渡到翻譯元件的X位置的元件。不幸的是，動畫完成後立即回到起始位置。我該如何防止這種行爲並將其保持在動畫結束的位置？

我注意到，如果我給這個項目做動畫：絕對的，問題就會消失。但是我的佈局需要相對定位。

Answer 1

.card_content_icon { 
     display: inline-block; 
} 

i元素默認爲內聯。

http://codepen.io/anon/pen/mDnqA