Переключатель тёмной темы, гамбургер-меню, превращающееся в крестик, чекбокс с плавной галочкой — множество привычных элементов интерфейса можно анимировать целиком на CSS, без единой строчки JavaScript, если правильно продумать структуру разметки под них.
Гамбургер-меню из трёх полосок, превращающееся в крестик при открытии, обычно делают из трёх коротких блоков внутри кнопки — при добавлении класса активного состояния верхняя и нижняя полоски поворачиваются через transform и сдвигаются так, чтобы вместе с центральной образовать крестик, а сама центральная просто исчезает.
Переключатель в стиле тумблера чаще всего строят на спрятанном чекбоксе и связанном с ним через label визуальном элементе — сам чекбокс визуально скрыт, но остаётся доступным для клавиатуры и скринридеров, а видимый переключатель анимируется через псевдокласс checked у чекбокса, который управляет положением ползунка.
Такой подход, где реальный интерактивный элемент скрыт, а стилизованная замена управляется через связанные с ним состояния, встречается очень часто — он позволяет получить полностью кастомный внешний вид, сохранив при этом всю встроенную доступность нативного элемента формы.
Анимированные иконки — раскрывающаяся стрелка аккордеона, вращающийся индикатор загрузки, пульсирующая точка уведомления — почти всегда строятся из простых геометрических фигур и псевдоэлементов, а не из готовых картинок, что делает их лёгкими и легко настраиваемыми под любую цветовую схему.
Преимущество CSS-анимации перед SVG-анимацией или GIF в том, что она остаётся векторной и чёткой на любом экране, легко перекрашивается через обычные CSS-свойства и не требует загрузки дополнительных файлов изображений.
Примеры готовых CSS-переключателей и анимированных иконок с разбором кода можно найти в подборках на CSS-Tricks, одном из известных ресурсов про практический CSS.
