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