uniapp中使用css3动画 ios11没效果不兼容？

帮忙看一下以下代码 uniapp运行h5 ios11，xr没效果
<template>
<div>
<div class="fireworks" v-for="(item1,index1) in 1" :key="index1">
<div class="year" v-for="(item,index) in 40" :key="index"></div>
</div>
<div class="city"></div>
</div>
</template>

<script>

</script>

<style lang="scss">
$size: 10px;
$speed: 5s;

// body {  
//  background-image: linear-gradient(#000, #204);  
//  min-height: 100vh;  
//  margin: 0;  
//  overflow: hidden;  
//  perspective: $size * 100;  
// }  

.fireworks {  
    position: absolute;  
    top: 100%;  
    left: 50%;  
    width: $size;  
    height: $size;  
    transform-style: preserve-3d;  
    transform: translateX(-50%);  
    transform: perspective(1000);  
    @-webkit-keyframes fireworksTop {  
        0% {  
            top: 100%;  
        }  

        25% {  
            top: var(--height);  
            animation-timing-function:ease-in;  
        }  

        100% {  
            top: 200%;  
        }  
    }  

    @for $f from 0 to 3 {  
        &:nth-child(#{$f + 1}) {  
            $delay: $f / 3 * $speed;  
            animation: fireworksTop $speed $delay infinite ease-out,  
            fireworks#{$f} $speed*10 $delay infinite step-end;  

            @-webkit-keyframes fireworks#{$f} {  
                @for $i from 0 to 10 {  
                    #{($i * 10) + "%"} {  
                        left: #{(20 + random(60)) + "%"};  
                        transform: translateX(-50%) scale(#{(50 + random(50)) / 100});  
                        --hue: #{36 * $i};  
                        --height: #{10 + random(25) + "%"}  
                    }  
                }  
            }  

            @for $y from 1 through 73 {  
                &>.year:nth-child(#{$y}) {  
                    background-color: hsl(calc(var(--hue) + #{random(100)}), 100%, 75%);  
                }  
            }  

            @for $y from 1 through 73 {  
                &>.year:nth-child(#{$y}) {  
                    --t: translateX(#{(random(100) - 50) * $size}) translateY(#{(random(50) - 75) * $size}) translateZ(#{(random(100) - 50) * $size}) rotateX(#{random(720)}deg) rotateY(#{random(720)}deg) rotateZ(#{random(720)}deg) scale(0);  
                }  
            }  
        }  
    }  

    &>.year {  
        position: absolute;  
        width: 100%;  
        height: 100%;  
        background-color: #fff;  
        animation: yearTransform $speed infinite ease-out;  
        animation-delay: inherit;  

        @-webkit-keyframes yearTransform {  
            0% {  
                transform:scale(0);  
            }  

            25% {  
                transform:none;  
            }  

            100% {  
                transform:var(--t);  
            }  
        }  
    }  
}  

.city {  
    position: fixed;  
    bottom: 0;  
    width: 100%;  
    height: 30vh;  
    background-repeat: no-repeat;  
    z-index: 9999;  
    $w: 0px;  
    $bgSize: "0 0";  
    $bgPos: "center";  
    $bgImg: "linear-gradient(#000, #102)";  

    @while $w < 2000px {  
        $thisWidth: (1 + random(5)) * $size;  
        $thisHeight: (10 + random(90));  
        $bgSize: $bgSize + ', '+ $thisWidth + ' '+ $thisHeight + "%";  
        $bgPos: $bgPos + ', '+ $w + ' bottom';  
        $bgImg: $bgImg + ', linear-gradient(#000, #102)';  
        $w: $w + $thisWidth  
    }  

    background-size: #{$bgSize};  
    background-position: #{$bgPos};  
}  

</style>