Плавное появление сверху ul списка (width, height = 100%)?
Здравствуйте!
Вы можете посмотреть Рабочий пример

Дело в том, что если вы используете display: none/flex, плавной анимации не будет.
В примере выше, мы используем значение высоты (как и у вас), только добавляем самому меню overflow: hidden, чтобы скрыть содержимое.
Смотрите:
Лично я делаю так - для "гамбургера" и списка делаю див, объединяющий их двоих, потом, будем считать, что этот див будет назван .dropdown, создаем ему ширину с высотой и ставим в том месте где и гамбургер, пишем: 
.mob-links {
    transform: scaleY(0);
    transform-origin: 0, 0;
    transform-duration: 1s;
}

.dropdown:hover .mob-links {
    transform: scaleY(1);
    transform-origin: 0, 0;
    transform-duration: 1s
}
(а потом прописываете анимацию для самого "гамбургера" через .dropdown:hover, чтобы он активировался только вместе со списком)