CSS翻译动画重置到起始位置答案

【问题标题】：CSS translate animation resets to starting positionCSS翻译动画重置到起始位置
【发布时间】：2014-06-14 16:27:29
【问题描述】：

.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 位置。不幸的是，当动画完成时，它会立即回到起始位置。如何防止这种行为并将其保持在动画结束的位置？

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

【问题讨论】：

标签： html css css-animations

【解决方案1】：

.card_content_icon {
      display: inline-block;
}

i 元素默认是内联的。

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

【讨论】：