css设置一个的背景上下移动的效果

遇到一个需求，要求设置一个元素的背景具有上下移动的需求
html

<div class="move-background">

css

.move-background{
  height: 100px;
  width: 100px;
  border: 1px solid red;
  /* 设置背景图片为渐变图 */
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), red, rgba(0,0,0,0), rgba(0,0,0,0));
}
.move-background:hover{
  /* 当鼠标浮到元素框中的时候就发生背景图上下移动的效果 */
  animation: slidein 5s linear infinite;
  /* 需要将背景图放大4倍，不然没有移动效果 */
  background-size: 400% 400%;
}
/* 设置的移动效果 */
@keyframes slidein {
    0% {
        background-position: 0% 100%;
    }
    25% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 0% 0%;
    }
    75% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 0% 100%;
    }
}