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 Transition为元素设置动画，以转换元素的X位置。不幸的是，当动画完成时，它会立即回到起始位置。如何防止此行为并将其保持在动画结束的位置？

我注意到，如果我给这个项目我是动画位置：绝对，问题就会消失。但我需要相对定位我的布局。

Answer 1

.card_content_icon {
      display: inline-block;
}

默认情况下，i元素是内联的。

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