vue2.0项目中使用CSS3 animation动画在安卓手机上失效解决办法

vue2.0 + webpack做移动端项目，如果在项目中使用了CSS3 animation动画属性，会发现在ios上完全没问题，但是在安卓手机上依然失效，尽管把animation在五大浏览器各种兼容都写了还是不行，原因其实很简答。其实在 vue-cli脚手架package.json配置文件里面就有对浏览器的版本做css的前缀处理

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

意思是 只兼容主流浏览器的最新两个版本。如果我们要兼容所有的就必须把这改成

"browserslist": [
    "> 1%",
    "last 5 versions",
    "Android >= 4.0",
    "not ie <= 8"
  ]

就可以了。

CSS部分我们也需要做好兼容写法，优雅降级和渐进增强都可以。

    .audio-play-show {
        -webkit-animation: say 12s linear infinite;
        -moz-animation: say 12s linear infinite;
        -ms-animation: say 12s linear infinite;
        -o-animation: say 12s linear infinite;
        animation: say 12s linear infinite;
    }
    
    
    @-webkit-keyframes say {
        0% {}
        100% {
            -webkit-transform: rotateZ(360deg);
        }
    }
    
    @-moz-keyframes say {
        0% {}
        100% {
            -moz-transform: rotateZ(360deg);
        }
    }
    
    @-ms-keyframes say {
        0% {}
        100% {
            -ms-transform: rotateZ(360deg);
        }
    }
    
    @-o-transforms say {
        0% {}
        100% {
            -o-transform: rotateZ(360deg);
        }
    }
    
    @keyframes say {
        0% {}
        100% {
            transform: rotateZ(360deg);
        }
    }