Css - 动画背景图像 - 缩放效果与循环

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%; } }