Why does @ key-frames animation have no effect in the production environment of vue project?

A single page built in the vue project. The bottom of the page is used to prompt the user to turn the page, similar to the small icon scrolling with the mouse, and there is a small circular animation. The code is as follows (the outer icon of saving time is not shown here):

@-webkit-keyframes nextAnimation {
0% {height: 4px;}
50% {height: 14px;}
100% {height: 4px; top: 18px;}

}
.next _ move {

position: absolute;
top: 6px;
left: 50%;
margin-left: -2px;
width: 4px;
height: 4px;
background: -sharpfff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
animation: nextAnimation 0.8s infinite 0s linear;

}
OK, there is nothing wrong with the development environment: