Анимация фонового изображения загрузки Squarespace не центрируется на настольном компьютере или мобильном устройстве ⇐ CSS

[Anonymous]

Я создал простой веб-сайт на Squarespace с анимацией экрана загрузки и фоновым изображением логотипа.

В пользовательском CSS у меня есть:

/* Обложка экрана загрузки для дома */ .загрузочный экран { анимация: screenFade .5с вперед 3,5с кубическая Безье(.25,.75,.5,1.25); цвет фона: #000000; высота: 100%; положение: фиксированное; слева: 0; верх: 0; ширина: 100%; z-индекс: 10000; } /* Логотип экрана загрузки */ .loading-screen-image { анимация: AnimatedLogo 1,5 с. легкость ввода-вывода. 0,5 с. поочередно, бесконечно, ничего не работает; фоновое изображение: URL (https://images.squarespace-cdn.com/cont ... mage%2Fpng); фоновая позиция: центр по центру; фоновый повтор: без повтора; фоновое вложение: исправлено; размер фона: содержать; позиция: абсолютная; } @keyframes AnimatedLogo { от { преобразование: масштаб (1); Transform-Origin: нижний центр; } к { преобразование: масштаб (1,5); } } Когда анимация запускается, она по какой-то причине перемещается и отклоняется от исходного положения. У меня такое ощущение, что это как-то связано с масштабом преобразования, хотя я и пытался поиграть со свойством начала преобразования, чтобы масштабирование происходило из центра изображения.

Еще один вывод: когда я не позиционирую .loading-screen-image, изображение немного выходит за пределы экрана — вероятно, из-за установленной позиции фона. Возможно, это также влияет на начальную позицию анимации?

Я попробовал эту анимацию в CodePen, и, похоже, она работает нормально.