gazes12, расскажите, пожалуйста, какое значение будет у display на 50%? flex-none? none-flex? nfolneex?
А на 30%?
Вот и браузер не знает.
Поэтому и не работает.
Вам предлагают быстро поменять display, а дальше менять все остальное, что нужно для анимации.
Я бы попробовала обойтись без смены display.
Отступы можно тоже убирать. Правда, будет сдвигаться нижний блок (но по демке не понятно, какой эффект должен быть на самом деле).
Можно задать отступы второму элементу.
Можно убирать у одного и задавать другому с одинаковой скоростью (я бы не стала, риск дерганья)
Сначала вам нужно сделать разметку валидной.
ul не может быть прямым потомком другого ul.
Потому что иначе не совсем понятно, кого вы обзываете родителем внутреннего списка.
Alex47517, из-за какого текста? В вашей песочнице был тег p, в котором из "текста" была только иконка.
Скорректируйте песочницу так, чтобы была видна проблема.
Если речь про текст, который справа, то затемнение должно быть псевдоэлементом для обертки непосредственно картинки.
