vue里transition实现动画，在ios10.3上无效；打包后低版本安卓系统webview动画失效

页面有个弹窗，我要实现的效果就是弹窗从底部滑上来，并伴随轻微的抖动效果。
HTML部分：

<transition name="bounce">
    <div class="my-popup" v-show="showPopup">
       <!-- 弹窗内容 -->
    </div>
</transition>

css部分：

/* 弹窗入场动效 */
.bounce-enter-active {
    animation: slideInUp ease .5s, bounceIn .2s .5s;
    -webkit-animation: slideInUp ease .5s, bounceIn .2s .5s;
}
/* 弹窗出场动效 */
.bounce-leave-active {
    animation: slideOutDown .4s both;
    -webkitanimation: slideOutDown .4s both;
}
/* 往上滑入 */
@keyframes slideInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        -webkit-transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    to {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
}
/* 往下滑出 */
@keyframes slideOutDown {
    0% {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}
/* 抖动效果 */
@keyframes bounceIn {
    0%,
    20%,
    53%,
    80%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    40%,
    43% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, 10px, 0);
        -webkit-transform: translate3d(0, 10px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, 6px, 0);
        -webkit-transform: translate3d(0, 6px, 0);
    }
    90% {
        transform: translate3d(0, 2px, 0);
        -webkit-transform: translate3d(0, 2px, 0);
    }
}

结果在iOS10.3.2系统上，slideUp的效果不出现，只有抖动的效果。
后面将slideUp延迟0.01s后，效果出来了，修改弹窗入场动效如下：

/* 弹窗入场动效： 弹窗往上滑动的效果需要加个延迟，否则在iOS10.3系统动画失效 */
.bounce-enter-active {
    animation: slideInUp ease .5s .01s, bounceIn .2s .5s;
    -webkit-animation: slideInUp ease .5s .01s, bounceIn .2s .5s;
}

---

补充:
上述解决了ios10.3动画失效问题。由于页面是嵌入在webview里使用的，后续发现在安卓（oppo 4.4）和（vivo x7 4.4）的系统里，动画也会失效，即使加了-webkit，-moz，-o，-ms-等各种前缀还是不行，后面参考csdn上的办法得以解决（原文地址：https://blog.csdn.net/ysm19950927/article/details/80526566）
将vue-loader.conf.js文件中，isProduction改成false，如下：

loaders: utils.cssLoaders({
   sourceMap: sourceMapEnabled,
   extract: isProduction
}),

改成

loaders: utils.cssLoaders({
   sourceMap: sourceMapEnabled,
   extract: false
}),