Как создать эффект увеличения изображения (не при наведении)

Question

Если вы посетите https://menupages.com/, вы увидите, что фоновое изображение автоматически увеличивается при загрузке страницы.Как достигается этот эффект?

Answer 1

Вы можете заархивировать этот эффект, поиграв с ключевым кадром, преобразовав: масштаб и непрозрачность изображения.

Как-то так.

    keyframe zoomIn {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    20% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.25);
    }
}

И добавьте его в элемент или класс img.

img {
...
animation-name: zoomIn;

}

Чтобы глаз был доволен, изображение должно быть в 2 раза больше по соотношению сторон.