Why does this scale animation jitter at the end?

Question

I just want this image to scale down from 2 and back to normal then stop. In my browser it jitters at the end of the animation and the image goes back to the normal size.. Any idea why it's doing this?

Codepen here also.

.hero {
  height: 100vh;
  background: grey;
  overflow:hidden;
}

.image {
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  height: 30vw;
  width: 50%;
  margin-left: auto;
  animation: scale 4.5s ease;
  -webkit-animation: scale 4.5s ease;
  -moz-animation: scale 4.5s ease;
  -o-animation: scale 4.5s ease;
  -ms-animation: scale 4.5s ease;
  backface-visibility: hidden;
}

@keyframes scale {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

<section class="hero">
 <div class="image" style="background-image:url('https://picsum.photos/1000/1000')"></div>
</section>