Using Keyframes for CSS animation: for some reason the animation doesn't start

Question

I am trying to make the image move up and down like yo-yo, but for some reason the animation doesn't work. I don't understand why.

HTML:

<img class="user-img" src="https://codepen-chriscoyier-bucket.imgix.net/1.png" alt="Avatar for user 1">

CSS:

img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid black;
  object-fit: cover;
  padding: 5px;
  margin: 5px;
  -webkit-animation: move-up-down 2s infinite;
  -moz-animation: move-up-down 2s infinite;
  animation: move-up-down 2s infinite;
}
@-webkit-keyframes move-up-down {
  0%,100% {top: 0px;}
  50% {top: 200px;}
}

@-moz-keyframes move-up-down {
  0%,100% {top: 0px;}
  50% {top: 200px;}
}

@keyframes move-up-down {
  0%,100% {top: 0px;}
  50% {top: 200px;}
}

Any help would be appreciated.