Css - анимировать фоновое изображение - увеличение эффекта с петлей

Question

Я ищу чистый способ архивировать эффект, используя CSS3 анимации:

У меня есть DIV, который имеет стиль CSS:

background-image:url('image.png'); 
background-size:cover; 
/* Just to note this page has 100% width and 100% height */ 
width:100%; 
height:100; 

Эти два правила , делает изображение полноэкранным. Теперь он ищет способ, чтобы создать эффект масштабирования, скажем, 5 секунд. Таким образом, пользователь на загрузке страницы видит полный фон страницы, который становится все меньше, но все время составляет 100% ширины и высоты.

Я нашел несколько примеров, но большинство из них используют эффект зависания, и я хочу иметь анимацию при загрузке страницы.

Благодарим за консультацию.

Answer 1

Запустите фоновый размер изображения как более 100%, а затем используйте анимацию ключевого кадра, чтобы она масштабировала ее до 100% в качестве конечного значения.

Для контура используйте animation-direction: alternate;

body { 
 
    height: 100vh; 
 
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg); 
 
    background-size: 110% 110%; 
 
    background-position: center center; 
 
    animation: shrink 5s infinite alternate; 
 
} 
 
@keyframes shrink { 
 
    0% { 
 
    background-size: 110% 110%; 
 
    } 
 
    100% { 
 
    background-size: 100% 100%; 
 
    } 
 
}