CSS3 过渡效果

Question

我最近一直在研究 CSS3，我做了一个设计只是为了好玩，有很多不必要的功能和效果。这里是：

http://wendyhenrichs.com/could/

如果您查看我在顶部的导航栏，您会注意到当您将鼠标悬停在链接上时，它会以平滑的过渡动作向右移动 7 个像素。

但是请注意，当您将鼠标从链接上移开时，它会立即跳回原来的位置。

有什么方法可以让它以平滑的运动淡入原位，就像它之前移动的那样？

Answer 1

是的，有办法.. 给它一个position 以转换回

您已经在默认a 上进行了转换，因此只需将nav as 的相对位置设置回0；它也需要position: relative，所以如果您只是将position: relative 置于默认状态，那么您只需在悬停状态下操作左坐标

#nav ul li a {
  color: red;
  text-decoration: none;
  position: relative;
  left: 0;
}

#nav ul li a:hover,
#nav ul li a:focus,
#nav ul li a:active {
  color: white;
  left: 7px;
}

工作示例：HERE