1. Рождение: Первой веб-анимацией принято считать мигающий текст <blink> в браузере Netscape Navigator (1994 год).
2. GIF: Формат GIF появился в 1987 году, но стал массовым в вебе только с развитием интернета в 90-х.
3. Flash-революция: Технология Flash (Macromedia, затем Adobe) почти 20 лет была стандартом веб-анимации, пока не была убита в 2020 году.
4. Смерть Flash: Adobe официально прекратила поддержку Flash Player 31 декабря 2020 года.
5. HTML5: Пришел на смену Flash, позволив анимировать элементы без сторонних плагинов.
6. CSS3: Появление CSS-анимаций и трансформаций (2009-2011) произвело революцию в производительности.
7. Canvas: Элемент <canvas> был представлен Apple для Safari в 2004 году, но стал стандартом HTML5 позже.
8. SVG: Масштабируемая векторная графика позволяет анимировать контуры и фигуры без потери качества.
9. WebGL: Технология для 3D-графики в браузере, стандартизирована в 2011 году.
10. Lottie: Формат анимации, созданный Airbnb в 2015 году, позволяет использовать анимации After Effects в вебе.
11. CSS vs JS: CSS-анимации обычно производительнее, так как выполняются в отдельном потоке (композиторе), а JS — в основном.
12. Свойства-триггеры: Анимировать свойства transform и opacity дешевле всего для браузера.
13. Layout Thrashing: Анимация свойств width, height, top, left вызывает перерасчет макета (reflow) и тормозит.
14. Will-change: Свойство will-change подсказывает браузеру, какие элементы будут анимироваться, оптимизируя рендеринг.
15. RequestAnimationFrame: Это правильный способ анимировать через JS, синхронизированный с частотой обновления экрана.
16. SetTimeout: Использование setTimeout для анимации — плохая практика, так как не синхронизируется с рендерингом.
17. Кубическая Безье: Функции плавности cubic-bezier позволяют создавать сложные кривые ускорения.
18. Steps: Функция steps() в CSS позволяет создавать «покадровую» анимацию (как в GIF).
19. Keyframes: @ keyframes управляют промежуточными состояниями анимации.
20. Триггеры: Анимация может запускаться по :hover, :focus, :active или через JS-события.
21. Web Animations API: Нативный JS API для управления анимациями, объединяющий CSS и JS подходы.
22. SMIL: Устаревший язык анимации SVG, который до сих пор поддерживается браузерами, но не рекомендуется к использованию.
23. GSAP: Одна из самых мощных JS-библиотек для анимации, часто используемая в сложных проектах.
24. Three.js: Популярная библиотека для работы с 3D-графикой (WebGL) в браузере.
25. Bodymovin: Плагин для After Effects, экспортирующий анимацию в JSON для Lottie.
26. Sprite-анимация: Использование спрайт-листов (одна картинка с кадрами) до сих пор актуально для игр.
27. Аппаратное ускорение: Использование GPU для рендеринга анимации (через translateZ(0) или translate3d).
28. FPS: Целевой показатель для плавной анимации — 60 кадров в секунду (16.6 мс на кадр).
29. Jank: Так называют «рывки» или пропуски кадров при анимации.
30. Preloader: Анимация загрузки — классический пример веб-анимации, удерживающий внимание пользователя.
31. 12 принципов: Принципы анимации Диснея (сжатие, упреждение, сценичность и т.д.) активно применяются в вебе.
32. Easing: Линейная анимация выглядит роботизированно; для естественности нужно использовать easing.
33. Длительность: Идеальная длительность UI-анимации — 200-500 мс. Дольше — пользователь устанет ждать.
34. Микроанимации: Небольшие анимации (лайки, переключатели) повышают вовлеченность пользователя.
35. Скелетоны: Skeleton screen (серые блоки вместо контента) — это тоже анимация, снижающая когнитивную нагрузку.
36. Обратная связь: Анимация подтверждает действие пользователя (например, кнопка нажалась).
37. Контекст: Анимация должна помогать понять, откуда пришел элемент и куда он ушел.
38. Иерархия: Анимация может направлять взгляд пользователя на важные элементы.