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

我正在寻找使用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%的宽度和高度

我找到了一些例子，但大多数都使用：悬停效果，我想在页面加载时使用动画

---

感谢您的建议。

将图像背景大小设置为大于100%，然后使用关键帧动画将其“缩放”到100%作为结束值

对于循环，使用动画方向：交替

正文{
高度：100vh；
背景图片：url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3999/Tilt-Shift_-_Cityscene.jpg);
背景大小：110%110%；
背景位置：中心；
动画：收缩5s无限交替；
}
@关键帧收缩{
0% {
背景大小：110%110%；
}
100% {
背景大小：100%100%；
}
}

AFAIK您需要使用javascript在页面加载时添加一个类，然后在一段时间后将其删除——或者，使用javascript在页面加载时简单地执行动画是的，我写道，我试图找到答案，但所有好的例子都使用：悬停开始动画。我可以使用div而不是body元素吗？当然……这只是一个演示。效果并不平滑。