使用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; }
}

您可以检查浏览器对犬科动物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上的链接。