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

#css #css-transitions

#css #css-переходы

Вопрос:

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

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

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

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

1. Когда я тестирую его, он переходит вперед при наведении курсора мыши и обратно при выводе мыши. То есть, он никогда не показывает плавный переход. Не знаю, что это значит, но подумал, что вам, возможно, захочется узнать.

2. Ссылка недоступна, поэтому это не вопрос.

Ответ №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;
}