vue项目生产环境下@key-frames动画为何没有效果？

Question

vue项目中构建的单页面，页面底部有用来提示用户翻页，类似与鼠标滚动的小图标，有个循环的小动画，代码如下（节约时间外层的图标这里不展示了）：

@-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: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
animation: nextAnimation 0.8s infinite 0s linear;

}
好，开发环境没有任何问题：

npm run build后丢到服务器，其他地方暂时没发现什么问题，就这里，动效消失了！
尝试清除scoped属性依然能没有效果，编译后的css样式如下：

求大神解答？？

Answer 1

已经解决啦！
vue打包后动画失效！
找到build文件夹中的vue-loader.conf.js,把extract的值改为false---如图

Answer 2

我也遇到了，这个类似的问题

我在安卓Webview 测试环境没问题，上生产就有问题

现在也是懵逼中