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

Question

假设我有一个 anchor 标签。当 anchor 标记悬停时，除了颜色和背景颜色发生变化外，我如何使用过渡将 anchor 标记中的文本移动到悬停时向右移动 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 .