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. Иерархия: Анимация может направлять взгляд пользователя на важные элементы.

39. Невидимая анимация: Иногда лучшая анимация — та, которую пользователь не замечает, но чувствует плавность.
40. Раздражение: Слишком долгая или навязчивая анимация вызывает раздражение и желание закрыть сайт.
41. Доступность (A11y): Анимация может вызывать тошноту или приступы у людей с вестибулярными расстройствами.
42. Prefers-reduced-motion: Медиазапрос, позволяющий отключить анимацию для пользователей с чувствительностью к движению.
43. Эпилепсия: Быстрое мигание (более 3 раз в секунду) может спровоцировать приступ.
44. Загрузка: Анимация не должна задерживать загрузку контента (LCP).
45. Мобильные устройства: На мобильных анимация должна быть легче, чтобы не тратить батарею.
46. Hover vs Tap: На тач-устройствах нет hover-эффектов, это нужно учитывать при дизайне.
47. Звук: Анимация со звуком должна иметь возможность отключения звука.
48. After Effects: Основной инструмент для создания сложных веб-анимаций (через Lottie или видео).
49. Figma: Позволяет создавать прототипы анимаций (Smart Animate).
50. Principle: Инструмент для быстрого прототипирования анимаций интерфейса.
51. Haiku: Инструмент для создания анимаций, интегрируемый с кодом.
52. Rive: Современный конкурент Lottie, позволяющий создавать интерактивные анимации.
53. SVGator: Инструмент для анимации SVG без кода.
54. CSS Gradient Animator: Генераторы анимированных градиентов.
55. CodePen: Главная площадка для демонстрации веб-анимаций.
56. Dribbble: Сообщество дизайнеров, задающее тренды в анимации.
57. Awwwards: Премия, награждающая сайты с выдающимся дизайном и анимацией.
58. Оптимизация: Анимации нужно сжимать (Gzip/Brotli), чтобы не раздувать бандл.
59. Спрайты vs Lottie: Lottie весит меньше, чем видео, но требует подключения библиотеки.
60. Эффект Зейгарник: Незавершенная анимация (прогресс-бар) заставляет мозг ждать завершения.
61. Скорость восприятия: Мозг воспринимает 100 мс как мгновенную реакцию, 1 секунда — как задержку.
62. Иллюзия движения: Анимация — это последовательность статичных кадров, создающая иллюзию движения.
63. Фи-феномен: Мозг воспринимает два мигающих огонька как один движущийся объект.
64. Эмоции: Плавная анимация создает ощущение премиальности продукта.
65. Когнитивная нагрузка: Анимация может как помогать обучению, так и отвлекать.
66. Внимание: Резкое движение в периферийном зрении автоматически привлекает внимание.
67. Будущее: Тренд на интерактивную анимацию, реагирующую на курсор, скролл и даже голос.