Какие технологии необходимо знать для создания красивых анимированных веб-сайтов?
Тут не будет идеального ответа, так как всё зависит от конкретного дизайна и его идеи.

Но если так издалека начать накидывать, то конечно же:
CSS

transforms
perspective
animations
производительность (например, такие свойства как: will-change, contain)
filters
clip-path
positions
masks


JS

requestAnimationFrame
Управление скроллом
дебаунс\тротлинг
canvas
WebGL
three.js
EventLoop - таски, в том числе рендер таски
Управление видео и аудио


SVG

фильтры
блюры
анимации
паттерны
маски


Общее

Производительность - как организовать слои и анимацию так, чтобы выдавать как можно больше fps и как можно меньше перерисовок.
Безопасные для анимации свойства (то есть знать что такое repaint и reflow)


очевидно надо гуглить js-библиотеки для анимации