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

実例：こちら