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:
clipboard.png
clipboard.png

npm run build
scopedcss:

clipboard.png

ask the Great God for an answer.


I also encountered this similar problem
clipboard.png
Webview

clipboard.png



vue
buildvue-loader.conf.js,extractfalse---

clipboard.png

clipboard.png

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9ef0e-1a15.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9ef0e-1a15.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?