Несколько уроков назад мы рассматривали тему CSS-переходов (свойство transition), которые позволяют добавлять плавность при изменении многих CSS-свойств элементов. Но в плавных переходах есть несколько минусов: CSS-анимация придаёт сайтам намного большую динамичность, оживляя веб-страницы и значительно улучшая взаимодействие с пользователем. В отличие от CSS переходов, анимация базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла. Анимация может применяться практически для всех html-элементов, а также для псевдоэлементов ::before и ::after...
Рабочая группа CSS одобрила это в 2022. Супер-пупер концептуальное предложение заключается в том, что мы можем анимировать или переходить, скажем, от display: block к display: none. Это немного головокружительно, потому что установка display: none для элемента отменяет анимацию. И его добавление перезапускает анимацию. Согласно спецификации: "Установка для свойства display со значением none остановит любую текущую анимацию, примененную к элементу и его потомкам. Если для элемента display установлено...