Css - animating background image - zoom effect with loop

Question

I'm looking for clean way to archive effect using css3 animations :

I have div, which has css style:

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

This two rules, makes image full screen. Now, im looking for a way, to create effect of zoom, for let's say 5 seconds. So user on page load see full page background, which is getting smaller, but all the time is 100 % width and height.

I found some examples, but most of them use :hover effect, and i want to have animation on page load.

Thanks for advice.

Answer 1

Start the image background-size as greater than 100% and then use a keyframe animation it 'scale' it down to 100% as the end value.

For a loop, use 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%;
  }
}