Эффект выключения телевизора — это анимация, при которой изображение резко сжимается в тонкую горизонтальную линию и гаснет, имитируя отключение старого лампового экрана. Чтобы его сделать, нужно определиться с инструментом: в видеоредакторах вроде Adobe Premiere Pro или After Effects эффект строится на масштабировании по вертикали, а на веб-странице — на CSS-свойстве transform.
Ниже разберём оба подхода: создание эффекта при монтаже видео и реализацию на сайте с помощью кода. Отдельно рассмотрим готовые пресеты и типичные ошибки, из-за которых анимация выглядит неестественно.
Из чего состоит эффект выключения ТВ
Классическая анимация отключения кинескопа состоит из трёх фаз. Сначала картинка быстро сжимается по вертикали до узкой светлой полосы. Затем полоса сжимается по горизонтали в точку. В финале точка гаснет — экран становится чёрным.
Именно последовательность фаз создаёт узнаваемый «телевизионный» характер. Если просто уменьшить масштаб кадра до нуля, получится обычный зум, а не эффект выключения. Поэтому ключевой параметр здесь — непропорциональное масштабирование: вертикаль и горизонталь анимируются раздельно и с разной скоростью.
Дополнительные детали усиливают реализм: короткая вспышка яркости перед сжатием, лёгкая волна или искажение изображения, звуковой щелчок. Всё это опционально, но заметно улучшает восприятие.
Эффект выключения ТВ = сжатие по вертикали → сжатие по горизонтали → затухание. Анимируйте оси раздельно, иначе получится обычный зум.
Эффект в Adobe Premiere Pro
В Premiere Pro нет встроенного пресета «выключение телевизора», поэтому анимацию собирают вручную на ключевых кадрах. Вам понадобится панель Effect Controls и свойства Scale Height и Scale Width — для этого снимите галочку Uniform Scale в разделе Motion.
Порядок действий выглядит так:
- 🎬 Поставьте ключевой кадр
Scale Heightна 100% в точке начала эффекта. - 📉 Через 5–10 кадров задайте
Scale Heightоколо 1–2% — картинка сожмётся в полосу. - ↔️ Сразу после этого анимируйте
Scale Widthот 100% до 0% за несколько кадров. - 🌑 В финале добавьте ключевой кадр
Opacityот 100% к 0% — полоса погаснет.
Чтобы движение не выглядело механическим, примените к ключевым кадрам сглаживание — правый клик по ключу и выбор Bezier или Auto Bezier. Резкое линейное сжатие выглядит дёшево.
☑️ Проверка эффекта в Premiere
Эффект в After Effects и мобильных редакторах
В After Effects логика та же, но инструментов больше. Отключите связь пропорций у свойства Scale (значок цепочки) и анимируйте вторую координату (высоту) до ~1%, затем первую (ширину) до нуля. Для искажения изображения в момент сжатия подойдёт эффект Wave Warp с малой амплитудой — он имитирует «дрожание» развёртки.
В мобильных редакторах вроде CapCut или VN прямой анимации отдельных осей может не быть. В этом случае поищите готовые шаблоны и стикеры по запросам «TV off», «TV shutdown» внутри самого приложения — такие пресеты часто доступны в библиотеках эффектов. Наличие конкретных шаблонов зависит от версии приложения, поэтому проверяйте актуальный каталог.
Эффект на сайте с помощью CSS
На веб-странице эффект реализуется через transform: scale() и @keyframes. Принцип тот же: сначала сжатие по оси Y, затем по оси X, затем исчезновение.
@keyframes tv-off {
0% { transform: scale(1, 1); opacity: 1; }
60% { transform: scale(1, 0.01); opacity: 1; }
85% { transform: scale(0.01, 0.01); opacity: 1; }
100% { transform: scale(0, 0); opacity: 0; }
}
.tv-off {
animation: tv-off 0.5s ease-in forwards;
}
Класс .tv-off добавляется элементу через JavaScript в момент «выключения» — например, по клику на кнопку. Значение forwards важно: оно удерживает конечное состояние, иначе элемент вернётся к исходному виду после завершения анимации.
Для усиления эффекта можно добавить белую вспышку: короткое повышение brightness() через filter в первых кадрах анимации. Но не переусердствуйте — на слабых устройствах тяжёлые фильтры могут просаживать частоту кадров.
Анимируйте только transform и opacity — эти свойства обрабатываются видеокартой и не вызывают перерисовку страницы, поэтому анимация будет плавной.
Звук и дополнительные детали
Без звука эффект воспринимается наполовину. Характерный «телевизионный» щелчок или короткий гул развёртки можно взять из бесплатных библиотек звуков — ищите по запросам «TV turn off sound» или «CRT power off». Формат и лицензию проверяйте на странице конкретного звука.
Звук должен начинаться одновременно с началом сжатия или на долю секунды раньше — так мозг связывает его с действием. Если щелчок запаздывает, эффект кажется «сломанным».
Почему старые телевизоры гасли именно так
В кинескопных (ЭЛТ) телевизорах изображение рисовалось электронным лучом, который развёртывался по экрану. При отключении питания развёртка пропадала быстрее, чем остывал люминофор и катод: луч схлопывался сначала в горизонтальную линию, затем в яркую точку в центре, которая медленно гасла. Современные эффекты копируют именно это поведение.
Типичные ошибки при создании эффекта
Самая частая проблема — одновременное сжатие по обеим осям. Картинка просто уменьшается к центру, и зритель не считывает это как выключение телевизора. Разделяйте фазы по времени, даже если интервал между ними всего несколько кадров.
Вторая ошибка — слишком медленная анимация. Реальное отключение ЭЛТ происходило быстро. Ориентируйтесь на длительность порядка половины секунды; растянутая на 2–3 секунды анимация выглядит как слайд-шоу.
⚠️ Внимание: при добавлении готовых шаблонов и звуков из интернета проверяйте их лицензию. Использование чужих ассетов без разрешения в коммерческих проектах может привести к претензиям правообладателей.
Третья ошибка — забытый чёрный фон. Если под сжимающимся видео находится другой контент, в момент сжатия он «проглянет». Подложите под клип чёрный слой или убедитесь, что фон страницы тёмный.
Сравнение способов создания эффекта
| Инструмент | Сложность | Гибкость настройки | Кому подходит |
|---|---|---|---|
| Premiere Pro | Средняя | Высокая (ключевые кадры) | Видеомонтажёрам |
| After Effects | Выше средней | Максимальная (эффекты, искажения) | Моушн-дизайнерам |
| Мобильные редакторы | Низкая | Ограничена шаблонами | Новичкам, соцсетям |
| CSS | Средняя | Высокая (код) | Веб-разработчикам |
Нет «лучшего» инструмента: для видео берите Premiere или After Effects, для сайта — CSS, для быстрого ролика в соцсетях достаточно шаблона в мобильном редакторе.
Частые вопросы
Можно ли сделать эффект без ключевых кадров?
Да, если использовать готовые пресеты или шаблоны «TV off» в мобильных редакторах и библиотеках переходов. В Premiere и After Effects ручная анимация ключевыми кадрами всё же даёт более контролируемый результат.
Почему картинка сжимается не к центру, а к краю?
Проверьте точку привязки (anchor point) — она должна находиться в центре кадра или элемента. В CSS за это отвечает свойство transform-origin: center.
Как сделать обратный эффект — включение телевизора?
Разверните анимацию в обратном порядке: из точки появляется горизонтальная линия, которая раскрывается в полный кадр. В CSS достаточно задать animation-direction: reverse или создать отдельные ключевые кадры.
Эффект в CSS дёргается на смартфоне. Что делать?
Уберите тяжёлые фильтры и тени из анимации, оставьте только transform и opacity. Также убедитесь, что одновременно не анимируется несколько крупных элементов.
Где взять звук выключения телевизора бесплатно?
Ищите в открытых звуковых библиотеках по запросам «TV off», «CRT shutdown». Перед использованием проверьте условия лицензии конкретного файла — часть звуков требует указания автора.