Нечетный переход прозрачности с CSS

Question

У меня есть меню, которое постепенно меняет цвет с белого на коричневый, когда мышь закончилась. Однако, когда я покидаю мышь, переход начинается с белого, когда он должен быть от коричневого до белого, и я не знаю, почему. Когда я перемещаю мышь, переход в порядке. Я копирую CSS:

li{ 
letter-spacing: 2px; 
margin-bottom: -10px; 
max-width: 280px; 
opacity: 0.5; 
transition: opacity 1s linear; 
} 
li:hover{ 
color: #9b2108; 
opacity:1; 
transition: opacity 3s linear; 
} 

Поздравления.

Answer 1

Не совсем уверен, как вы имеете в виду, но посмотрите на эти изменения. Это то, что вы ищете?

li{ 
letter-spacing: 2px; 
margin-bottom: -10px; 
max-width: 280px; 
opacity: 0.5; 
transition: all 1s linear; 
} 

li:hover{ 
color: #9b2108; 
opacity:1; 
transition: opacity 3s linear, color 3s linear; 
} 

Как вы можете видеть, я как переход opacity и color на парении, и all при наведении вне. EDIT: понял, что вы действительно можете изменить переход на hover на all.

Если вы хотите, чтобы color немедленно ввел вас в действие, вы можете оставить переход наведите, как и у вас.

Answer 2

Только элемент li требует перехода к нему.

li { 
    letter-spacing: 2px; 
    margin: 0 0 -10px; 
    max-width: 280px; 
    opacity: 0.5; 
    transition: opacity 1s linear; 
} 

li:hover { 
    color: #9b2108; 
    opacity: 1; 
}