Рабочая группа CSS одобрила это в 2022. Супер-пупер концептуальное предложение заключается в том, что мы можем анимировать или переходить, скажем, от display: block к display: none.
Это немного головокружительно, потому что установка display: none для элемента отменяет анимацию. И его добавление перезапускает анимацию. Согласно спецификации:
"Установка для свойства display со значением none остановит любую текущую анимацию, примененную к элементу и его потомкам. Если для элемента display установлено значение none, обновление display до значения, отличного от none, запустит все анимации, примененные к элементу с помощью свойства animation-name, а также все анимации, примененные к потомкам с display, отличным от none."
Это круговое поведение делает концепцию мертвой по прибытии. Но если @keyframes поддерживает любое отображаемое значение, кроме none, тогда никакие действия нельзя отменить или перезапустить. Это дает приоритет значениям, отличным от none, позволяя none выполнять свою работу только после завершения анимации или перехода.
Мириам объясняет, как это может работать:
Мы не то чтобы интерполируем между, скажем, block и none, но позволяем block оставаться нетронутым до тех пор, пока все не перестанет двигаться и не будет безопасно применять none. Это ключевые слова, поэтому между ними нет явных значений. Таким образом, это остается дискретной анимацией. Мы переключаемся между двумя значениями после завершения анимации.
Это пример Роберта Флэка, взятый прямо из обсуждения:
Это полезный пример, потому что он показывает, как первый фрейм устанавливает элемент в display: block, которому дается приоритет над нижележащим display: none как не-none значение. Это позволяет запускать и завершать анимацию, не отменяя и не сбрасывая ее в процессе, поскольку она разрешается только после анимации.
Это пример, на который Мириам ссылается в Mastodon:
На этот раз мы имеем дело с переходом. Базовое отображаемое значение устанавливается равным none до того, как что-либо произойдет, поэтому оно полностью исключается из потока документов. Теперь, если бы мы переходили при наведении, может быть так:
…тогда элемент теоретически должен исчезнуть через 200 мс. Опять же, мы переключаемся между отображаемыми значениями, но block имеет приоритет, поэтому переход не отменяется заранее и фактически применяется после завершения перехода непрозрачности.
По крайней мере, так мой разум читает это. Я рад, что есть очень умные люди, которые продумывают эти вещи, потому что я думаю, что есть куча вещей, с которыми нужно разобраться. Например, что произойдет, если элементу назначено несколько анимаций — ни одна из них не будет сброшена или отменена? Я уверен, что все, начиная от бесконечных анимаций, обратных направлений и многих других вещей, со временем будет решено.
Но какой супер крутой первый шаг!
Перевод статьи So, you’d like to animate the display property.