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

Posted 2023-05-08

【中文标题】使用 CSS3 悬停效果，如何将文本向左移动 5 个像素并向后移动？

【英文标题】：Using CSS3 hover effect, how can I move the text left 5 pixels and move it back?

【发布时间】：2013-08-04 05:17:33

【问题描述】：

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

【问题讨论】：

即使人仍然悬停在它上面也应该返回吗？

@kalley 是的，我忘了。

【参考方案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。

【讨论】：

当我知道仅在 css 中使用后退动画可以做到这一点时，它会猛然退缩

【参考方案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 唯一要做的就是阻止动画在加载时运行。

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