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

你可以check browser support of css animations on caniuse。

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

See it here

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

对小提琴进行的最新编辑和更新可以解决只有在链接上停留足够长时间才能完成动画的问题。它不会在下次重启。因此，javascript克隆并替换mouseout上的链接。

使用CSS3悬停效果，如何将文本移动5个像素并将其移回？

2 个答案:

See it here