Основной принцип разработки - KISS - keep it simple .
Вы же сделали сами для гифку для примера, она вас не устраивает чем? Качество прекрасное, я вот с мобилки смотрю. Оптимизация проигрывания - во всех браузерах потрясающая. Даже coub.com долгое время используют гифки с аудиодорожкой (возможно сейчас для видео выдают, тем кто поддерживает, webp или webm, не суть). Лишнего оверхеда нет, блок рисуется браузером один раз, лишних репеинтов, и прочего, нет, памяти и процессора жрется, вы удивитесь, просто в разы меньше, чем любая анимация с блоками. Из минусов, понятно, не такой красочный мокап, как в пнг,всего 256 цветов и максимум 1 бит прозрачности.
Не хотите гиф, ну, тут вам уже сказали, что нет никаких проблем, в т.ч с адаптивной вёрсткой.
У вас есть блок мокапа, у которого всегда жесткое соотношение сторон (например 4x3). У вас есть блок "экран" с анимацией тоже жёстко заданного соотношения относительно мокапа. Не надо выдумывать, задайте размер и позиционирование абсолютно в процентах. Проценты всегда будут считаться от высоты и ширины родителя (мокапа). Проценты можно высчитать и задавать дробно. Например left:22.222222%.
Как верстать мокап адаптивно? Я бы использовал юнит vw. 1vw = 1% ширины всего экрана. Отличие в том что он применяется и к высоте. Хотите на всю ширину на мобиле мокап 4х3? Задайте width:100vw;height:75vw;.
И не надо js анимации использовать, всё равно не оптимизируете нормально - либо страшные интервалы, либо задолбаетесь рассчитывать requestaninationframe. Используйте css анимации, лонгскрин не надо делать картинкой, надо бекграундом.
2 блока (например сам див и :before), 2 файла изображения, от силы 15 строк css - примерно должно быть в итоге.
Если извратиться через background image - можно в 1 html элемент вообще, с анимацией и без скриптов, адаптивно, клёво.