css slow zoom in animation

HTML

<div class='image-zoom'></div>

CSS

.image-zoom {
  width: 100%;
  float: left;
  position: relative;
  background: #000000;
  overflow: hidden;
  height: 500px
}
.image-zoom:before {
  background:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(https://kruxor.com/images/pexels-photo-709552.jpg) no-repeat center;
  content: "";
  display: inline-block;
  height: 100%;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 100%;
  /*z-index: -1;*/
  animation: 30s ease 0s normal none infinite running zoomin;
  -webkit-animation: 30s ease 0s normal none infinite running zoomin;
  -o-animation: 30s ease 0s normal none infinite running zoomin;
  -moz--o-animation: 30s ease 0s normal none infinite running zoomin;
}

@keyframes zoomin {
    0% { transform: scale(1.5, 1.5) }
    50% { transform: scale(1, 1) }
    100% { transform: scale(1.5, 1.5) }
}