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