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

工作示例：这里