Генератор CSS-анимации

Переход срабатывает на изменение свойства и идёт от старого значения к новому. Анимация не ждёт события: она запускается сама, знает промежуточные кадры и умеет повторяться. Переход подходит для наведения и раскрытия, анимация — для появления при загрузке и для бесконечного движения.

transform и opacity: браузер отдаёт их видеокарте и не пересчитывает разметку. Всё, что меняет размеры и положение в потоке — width, height, top, margin, — заставляет пересчитывать страницу на каждом кадре, и на телефоне это видно сразу. Поэтому сдвиг делают через translate, а не через left.

Она задаёт, как распределяется движение во времени. linear — равномерно, ease-out — быстро в начале и мягко к концу, ease-in — наоборот. Для появления берут ease-out: объект влетает и мягко тормозит. Для исчезновения ease-in: сначала медленно, потом быстро уходит.

Четыре числа — это координаты двух контрольных точек кривой: X отвечает за время, Y за прогресс. Значения Y за пределами от нуля до единицы дают отскок и перелёт: движение проскакивает конечную точку и возвращается. Именно так делают пружинку без библиотек.

Три обычные причины: анимируется свойство, вызывающее пересчёт разметки; на элементе висит тяжёлый фильтр или большая тень; кадров слишком много. Проверять надо в панели производительности браузера — она показывает, сколько времени уходит на разметку и отрисовку каждого кадра.

Уважать системную настройку. Медиазапрос prefers-reduced-motion сообщает, что человек просил уменьшить движение, и в этом случае анимацию либо отключают, либо заменяют простым проявлением. Для части людей резкое движение на экране вызывает тошноту и головокружение, это не вопрос вкуса.

Нет, всё собирается в браузере.