animation ios webkit cpu直接占满

Question

<template lang="pug">
    svg.ui_wave(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none")
        defs
            path(id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z")
        g.ui_wave_parallax
            use(xlink:href="#gentle-wave" x="50" y="0" fill="rgba(255, 255, 255, 0.1)")
            use(xlink:href="#gentle-wave" x="50" y="3" fill="rgba(255, 255, 255, 0.1)")
            use(xlink:href="#gentle-wave" x="50" y="6" fill="rgba(255, 255, 255, 0.1)")
</template>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .ui_wave
        width: 100%;
        height: 80px;
        position: absolute;
        bottom: 0px;
        left: 0px;
    .ui_wave_parallax>use:nth-child(1)
        animation-delay: -2s
    .ui_wave_parallax>use:nth-child(2)
        animation-delay: -2s;
        animation-duration: 5s;
    .ui_wave_parallax>use:nth-child(3)
        animation-delay: -4s
        animation-duration: 3s
    @keyframes move-forever
        0%
            // transform: translate(-90px, 0%);
        100%
            // transform: translate(85px, 0%);
    .ui_wave_parallax>use
        animation: move-forever 12s linear infinite
    use[Attributes Style]
        x: 50;
        y: 0;
        fill: rgb(255, 255, 255, 0.1)
    :not(svg),
    :not(foreignObject)>svg
        transform-origin: 0px 0px 0px;
</style>

move-forever动画里如果不注释transform cpu占的特别多。 请问怎么优化?
如图所示

Answer 1

You know now CSS3 is used to make games i have also made very interesting transitions and animations through css3 checkout
queryhelp learn programming