CSS translate animation resets to starting position

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);
    }
  }
}

Upon hover I animate an element using a CSS Transition to translate the X position of the element. Unfortunately when the animation completes it immediately back to its starting position. How can I prevent this behavior and keep it positioned where the animation ends?

I noticed that if I give the item I'm animating position: absolute, the issue goes away. But I need relative positioning for my layout.

Answer 1

.card_content_icon {
      display: inline-block;
}

An i element is inline by default.

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