css - 使用 CSS3 悬停效果，如何将文本向左移动 5 个像素并向后移动？

Question

假设我有一个锚标签。当锚标签悬停时，除了颜色和背景颜色发生变化之外，我如何使用过渡来移动锚标签中的文本，以便在悬停时向右移动 5 个像素，大约一秒钟后它应该回到原来的状态位置。

Answer 1

使用 css 动画和text-indent（DEMO）的解决方案：

a {
  display: block;
}

a:hover {
  -webkit-animation: INDENT 2s 1; /* Safari 4+ */
  -moz-animation:    INDENT 2s 1; /* Fx 5+ */
  -o-animation:      INDENT 2s 1; /* Opera 12+ */
  animation:         INDENT 2s 1; /* IE 10+ */
}

@-webkit-keyframes INDENT{  
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}
@-moz-keyframes INDENT {
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}
@-o-keyframes INDENT {
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}
@keyframes INDENT {
  0%   { text-indent: 0; }
  50% { text-indent: 5px; }
  100% { text-indent: 0; }
}

您可能需要稍微更改设置以获得更流畅的动画。您可以通过调整关键帧来实现延迟。要在 2 秒的动画中获得 1 秒的延迟，它会是这样的（DEMO）：

@keyframes INDENT{  
  0%   { text-indent: 0; }
  25% { text-indent: 5px; }
  75% { text-indent: 5px; }
  100% { text-indent: 0; }
}

您可以在 caniuse 上检查浏览器对 css 动画的支持。

Answer 2

只需一点 javascript，一切都很顺利（下面的 css 是最基本的必需品）：

a {
    display: inline-block; /* this just has to be block-level */
    -webkit-animation: moveAndBack 1s ease-in-out;
}
a.not-ready {
    -webkit-animation-duration: 0;
}
a:hover {
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes moveAndBack {
    0% { -webkit-transform: translate(0); }
    25% { -webkit-transform: translateX(5px); }
    100% { -webkit-transform: translateX(5px); }
}

看这里

javascript 所做的唯一一件事就是阻止动画在加载时运行。

对 fiddle 的最新编辑和更新解决了仅当您将鼠标悬停在链接上足够长的时间以使动画完成时才会发生的问题。下次就不会重启了。因此，javascript 克隆并替换mouseout.