Css Ключевые кадры трансформируют и затухают эффекты

Question

Здравствуйте, я пытаюсь добраться до этого:

Но я получаю это:

По какой-то причине каждая анимация по отдельности работает нормально, но даже если я установил непрозрачность на 0 и после преобразования мой элемент вернется в ту же позицию и ту же непрозрачность перед анимацией

Это открытый компонент поиска:

 const KeySearch2 = keyframes`
from { transform: translateY(-25px);opacity: 0; }
to   { transform: translateY(0px); opacity: 1;}
`;
export const SearchWrapper = styled.div`
  width: 70%;
  display: ${props => (props.test ? 'block' : 'none')};
  ${props =>
    props.test &&
    css`
      animation-duration: 0.5s;
      animation-name: ${KeySearch2};
    `}
  transform: translateY(-20px);
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  background: red;
`;

, и это мой компонент, когда мое состояние ложно или компонент поиска закрыт:

const KeySearch = keyframes`
from { transform: translateY(0); opacity: 1; }
to   { transform: translateY(20px); opacity: 0;}
`;
export const NavUl = styled.ul`
  ${props =>
    props.test &&
    css`
      animation-duration: 0.5s;
      animation-name: ${KeySearch};
    `}

  width: 70%;
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  svg {
    cursor: pointer;
  }
`;