I want to animate a vertical menu item when selected to move slightly to the right and to look smooth it would be usefull if it would return to the initial place when deselcted. During hover it should remain slightly off to the right. I looked it up a bit and found the :not pseudoselector yet results are rather glitchy.

The code so far is the following (parts omitted for simplicity):

   .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{
                0%{
                    transform: translate(0, 0);
                }
                100%{
                    transform: translate(5px, 0);
                }
            }
   @keyframes deselect{
                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;
        }

The solution must be in css because I’d rather not use any Javascript in the project.