Анимация отмены выбора элемента в чистом CSS [закрыто] ⇐ CSS

[Anonymous]

Я хочу анимировать вертикальный пункт меню, когда он выбран, чтобы он слегка перемещался вправо и выглядел плавным. Было бы полезно, если бы он возвращался в исходное место при отмене выбора. Во время наведения он должен оставаться немного вправо. Я немного поискал и обнаружил псевдоселектор :not, но результаты довольно глючные.
На данный момент код выглядит следующим образом:

Код: Выделить всё

    
.nav-list ul li{
padding-top: 3px;
padding-left: 0;
margin-left: 0;
color: white;
list-style: none;
font-family: serif;
font-weight: bold;}
@keyframes select{ /*5px to the right, should stay there */
0%{
transform: translate(0, 0);
}
100%{
transform: translate(5px, 0);
}
}
@keyframes deselect{ /*return to position*/
0%{
transform: translate(5px, 0);
}
100%{
transform: translate(0, 0);
}
}
.nav-list ul li:hover{
overflow-x: auto;
animation-name: select;
animation-timing-function: ease-out;
animation-duration: 350ms;
animation-iteration-count: initial;
}
.nav-list ul li:not(:hover){
overflow-x: auto;
animation-name: deselect;
animation-timing-function: ease-in;
animation-duration: 350ms;
animation-iteration-count: initial;
}



[list]
[*]Option 1
[*]Option 2
[*]Option 3
[/list]

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

Подробнее здесь: https://stackoverflow.com/questions/787 ... n-pure-css