gazes12, расскажите, пожалуйста, какое значение будет у display на 50%? flex-none? none-flex? nfolneex?
А на 30%?
Вот и браузер не знает.
Поэтому и не работает.
Вам предлагают быстро поменять display, а дальше менять все остальное, что нужно для анимации.
Я бы попробовала обойтись без смены display.
Отступы можно тоже убирать. Правда, будет сдвигаться нижний блок (но по демке не понятно, какой эффект должен быть на самом деле).
Можно задать отступы второму элементу.
Можно убирать у одного и задавать другому с одинаковой скоростью (я бы не стала, риск дерганья)
Сначала вам нужно сделать разметку валидной.
ul не может быть прямым потомком другого ul.
Потому что иначе не совсем понятно, кого вы обзываете родителем внутреннего списка.
Alex47517, из-за какого текста? В вашей песочнице был тег p, в котором из "текста" была только иконка.
Скорректируйте песочницу так, чтобы была видна проблема.
Если речь про текст, который справа, то затемнение должно быть псевдоэлементом для обертки непосредственно картинки.
Kvason, что они из себя представляют и так вполне понятно.
SeraphimaAkkerman эти линии это вылезающие отступы от заголовков. Гуглите "выпадение и схлопывание вертикальных margin" и воспользуйтесь любым из способов починки.
Но для начала хорошо бы почитать про семантику и не делать меню инпутами. Пункты меню это ссылки.
Сам заголовок "Меню" выглядит совсем странно. Зачем оно? И так очевидно, что это меню.
Про семантику верстки навигации есть прекрасное видео Вадима Макеева https://www.youtube.com/watch?v=y52rtbUeCac&list=P...
Кнопки (именно кнопки) удобнее делать тегами button, чем input. Легче стилизуются, можно внутрь складывать другие теги, текст не является значением. А input это просто устаревший вариант, когда тега button просто не существовало, оставлен для совместимости.
Про Eleventy https://www.youtube.com/watch?v=DtTadxKrFMY