CSS3 Transition Effect

Question

Я недавно изучил тонну CSS3, и я сделал дизайн просто для удовольствия с кучей ненужных функций и эффектов. Вот оно:

http://wendyhenrichs.com/could/

Если вы посмотрите на мою панель навигации вверху, вы заметите, что при наведении курсора на ссылку она перемещается на 7 пикселей вправо плавным переходным движением.

Но обратите внимание, что когда вы уберете мышку со ссылки, она сразу же вернется в исходное положение.

Есть ли способ заставить его плавно вернуться в исходное положение, как он двигался раньше?

Answer 1

Да, есть способ .. дать ему position для перехода обратно к

, у вас уже есть переход по умолчанию a, поэтому просто установите относительную позицию nav a s обратно на 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;
}

Рабочий пример: ЗДЕСЬ