Что такое Анимация
Анимация - это оптическая иллюзия движения, которая возникает при достаточно быстрой смене статичных кадров.
Гифка на вики с лицензией
Что такое анимация в веб-дизайне
Это постепенный (как правило плавный) переход из одного визуального состояния в другое.
Для чего нужна анимация в веб-дизайне
- Сделать переход между состояниями более очевидным
- Подсказать, как использовать интерфейс
- Обратить внимание на содержимое или часть UI
- Оживить оформление страницы
- Выделиться среди конкурентов
Как можно анимировать веб
- CSS Transitions (CSS Переходы)
- CSS Animations (CSS Анимация)
- JS, Web Animations API, canvas
- SVG анимации SMIL
Что можно анимировать
Всё, что угодно:) Любой элемент, то есть узел в DOM, представленный как бокс в раскладке. Можно анимировать текстовое содержимое, сами боксы, псевдоэлементы и т.д.
Какие свойства можно анимировать
Список анимируемых свойств един и для CSS переходов и для CSS анимаций. Но он может меняться и поэтому лучше всего проверять каждое свойство отдельно. Можно смотреть Animation type в разделе Formal definition на MDN или в спеках.
Ищите примеры и источники вдохновения
Гуглите подборки анимаций. Это могут быть как портфолио дизайнеров, так и примеры на реальных сайтах.
