Эффект перехода CSS3

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

http://wendyhenrichs.com/could/

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

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

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


css css-transitions
person Miles Henrichs    schedule 21.05.2011    source источник
comment
Когда я тестирую его, он прыгает вперед при наведении мыши и обратно при выходе из нее. То есть он никогда не показывает плавный переход. Не знаю, что это значит, но подумал, что вам может быть интересно узнать.   -  person MJB    schedule 21.05.2011
comment
Ссылка не работает, поэтому это не вопрос.   -  person Trevor Burnham    schedule 27.03.2012

Ответы (1)


arrow_upward
2
arrow_downward

Да, есть способ... поставьте 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;
}

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

person clairesuzy    schedule 21.05.2011
comment
Спасибо, это сработало! Приведенный вами пример был очень полезен! - person Miles Henrichs; 22.05.2011