html - 为 CSS 动画使用关键帧：由于某种原因动画无法启动

Question

我试图让图像像溜溜球一样上下移动，但由于某种原因动画不起作用。我不明白为什么。

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;}
}

任何帮助，将不胜感激。

标签： htmlcssanimation