如何在背景图像中启用缩放？

Question

我创建了一个带关键帧的示例来放大和缩小背景图像。这是工作，但也缩放内部文本。

我只需要将背景图像放大。因此，图像彼此不同，用户将有机会缩放背景图像。

@-webkit-keyframes snow {
  0% { background-position: 0px 0px, 0px 0px, 0px 0px }
  50% {  }
  100% {
    background-position: 500px 1000px, 400px 400px, 300px 300px;
    ;
  }
}
@-moz-keyframes snow {
  0% { background-position: 0px 0px, 0px 0px, 0px 0px }
  50% { }
  100% {
    background-position: 500px 1000px, 400px 400px, 300px 300px;

  }
}
@-ms-keyframes snow {
  0% { background-position: 0px 0px, 0px 0px, 0px 0px }
  50% {  }
  100% {
    background-position: 500px 1000px, 400px 400px, 300px 300px;
    ;
  }
}
@keyframes snow {
  0% { background-position: 0px 0px; }
  50% {  }
  100% {
    background-position: 5px 1000px;

  }
}

div{
  width:100%; 
  height:100vh;
  background-image:
    url('http://wallpaperlatest.com/wp-content/uploads/3d-live-wallpaper-free-download-1.jpg');
  background-size:100% 100%;
  position:fixed;
  top:0;left:0;
  width:100%;
  height:100vh;
  animation: zoom 30s infinite;
  text-align:center;
}
h1{
  color:#fff;
  font-size:50px;
}
@keyframes zoom {
  0% { transform:scale(1,1); }
  50% { transform:scale(1.2,1.2); }
  100% {
    transform:scale(1,1); 
  }
}

<div>
  <h1>OVER TEXT</h1>
  <a href="http://wallpaperlatest.com/free-live-wallpapers-download/">Image Souce:</a>
</div>