html - 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% 的宽度和高度。

我找到了一些例子，但大多数都使用 :hover 效果，我想在页面加载时有动画。

感谢您的建议。

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