css 无js动画增量旋转

Question

我没有发现类似的问题..所以我希望你不会生我的气。我可以在 css 中重构或优化此代码吗？例如，通过 icrement in css 每次旋转 20deg++ 或其他代码对我有用，但需要很多 space，我想少花点时间，但仍然优化（我不想使用任何 js）

body {
  background: #0D1B2A;
  text-align: center;
}
svg{
  max-width: 100vw;
  max-height: 100vh;
  -webkit-animation: loaderRot 2s linear infinite;
    -webkit-animation-timing-function: step-end; 
}

@-webkit-keyframes loaderRot{
    0%{ 
        transform: rotate(0deg);
    }
    5.56%{ 
        transform: rotate(20deg);
    }
    11.11%{ 
        transform: rotate(40deg);
    }
    16.67%{ 
        transform: rotate(60deg);
    }
    22.22%{ 
        transform: rotate(80deg);
    }
    27.78%{ 
        transform: rotate(100deg);
    }
    33.33%{ 
        transform: rotate(120deg);
    }
    38.89%{ 
        transform: rotate(140deg);
    }
    44.44%{ 
        transform: rotate(160deg);
    }
    50%{ 
        transform: rotate(180deg);
    }
    55.56%{ 
        transform: rotate(200deg);
    }
    61.11%{ 
        transform: rotate(220deg);
    }
    66.67%{ 
        transform: rotate(240deg);
    }
    72.22%{ 
        transform: rotate(260deg);
    }
    77.78%{ 
        transform: rotate(280deg);
    }
    83.33%{ 
        transform: rotate(300deg);
    }
    88.89%{ 
        transform: rotate(320deg);
    }
    94.44%{ 
        transform: rotate(340deg);
    }
    100%{ 
        transform: rotate(360deg);
    }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168.67168 168.10571">
    <g fill="#1dbbfc" stroke-width="13" stroke-miterlimit="4.4" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="#88dbfd" d="M86.207 124.064v37.042z" paint-order="fill markers stroke"/>
        <path stroke="#7cd7fd" d="M99.778 121.01l12.67 34.81z" paint-order="fill markers stroke"/>
        <path stroke="#70d4fd" d="M111.488 113.5l23.81 28.376z" paint-order="fill markers stroke"/>
        <path stroke="#64d0fd" d="M119.922 102.438l32.08 18.52z" paint-order="fill markers stroke"/>
        <path stroke="#58cdfd" d="M124.064 89.158l36.48 6.432z" paint-order="fill markers stroke"/>
        <path stroke="#4dc9fc" d="M123.414 75.263l36.48-6.433z" paint-order="fill markers stroke"/>
        <path stroke="#41c5fc" d="M118.05 62.427l32.08-18.52z" paint-order="fill markers stroke"/>
        <path stroke="#34c2fd" d="M108.62 52.2l23.81-28.376z" paint-order="fill markers stroke"/>
        <path stroke="#29befc" d="M96.262 45.815l12.67-34.808z" paint-order="fill markers stroke"/>
        <path stroke="#1dbbfc" d="M82.465 44.042V7z" paint-order="fill markers stroke"/>
        <path stroke="#e6f7ff" d="M68.893 47.094l-12.67-34.807z" paint-order="fill markers stroke"/>
        <path stroke="#dbf5ff" d="M57.184 54.605L33.374 26.23z" paint-order="fill markers stroke"/>
        <path stroke="#cff2fe" d="M48.75 65.667l-32.08-18.52z" paint-order="fill markers stroke"/>
        <path stroke="#c4ecfd" d="M44.608 78.947l-36.48-6.432z" paint-order="fill markers stroke"/>
        <path stroke="#b8e9fd" d="M45.257 92.843l-36.48 6.432z" paint-order="fill markers stroke"/>
        <path stroke="#ace5fd" d="M50.62 105.68L18.542 124.2z" paint-order="fill markers stroke"/>
        <path stroke="#a0e2fd" d="M60.05 115.906L36.24 144.28z" paint-order="fill markers stroke"/>
        <path stroke="#94defd" d="M72.41 122.29L59.74 157.1z" paint-order="fill markers stroke"/>
    </g>
</svg>

Answer 1

只需使用steps()然后控制时长：

body {
  background: #0D1B2A;
  display:flex;
  height:100vh;
  margin:0;
}
svg{
  max-width: 70vmin;
  max-height: 70vmin;
  margin:auto;
  animation: loaderRot 2s infinite steps(18);
}

@keyframes loaderRot{to{transform: rotate(360deg)}}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168.67168 168.10571">
    <g fill="#1dbbfc" stroke-width="13" stroke-miterlimit="4.4" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="#88dbfd" d="M86.207 124.064v37.042z" paint-order="fill markers stroke"/>
        <path stroke="#7cd7fd" d="M99.778 121.01l12.67 34.81z" paint-order="fill markers stroke"/>
        <path stroke="#70d4fd" d="M111.488 113.5l23.81 28.376z" paint-order="fill markers stroke"/>
        <path stroke="#64d0fd" d="M119.922 102.438l32.08 18.52z" paint-order="fill markers stroke"/>
        <path stroke="#58cdfd" d="M124.064 89.158l36.48 6.432z" paint-order="fill markers stroke"/>
        <path stroke="#4dc9fc" d="M123.414 75.263l36.48-6.433z" paint-order="fill markers stroke"/>
        <path stroke="#41c5fc" d="M118.05 62.427l32.08-18.52z" paint-order="fill markers stroke"/>
        <path stroke="#34c2fd" d="M108.62 52.2l23.81-28.376z" paint-order="fill markers stroke"/>
        <path stroke="#29befc" d="M96.262 45.815l12.67-34.808z" paint-order="fill markers stroke"/>
        <path stroke="#1dbbfc" d="M82.465 44.042V7z" paint-order="fill markers stroke"/>
        <path stroke="#e6f7ff" d="M68.893 47.094l-12.67-34.807z" paint-order="fill markers stroke"/>
        <path stroke="#dbf5ff" d="M57.184 54.605L33.374 26.23z" paint-order="fill markers stroke"/>
        <path stroke="#cff2fe" d="M48.75 65.667l-32.08-18.52z" paint-order="fill markers stroke"/>
        <path stroke="#c4ecfd" d="M44.608 78.947l-36.48-6.432z" paint-order="fill markers stroke"/>
        <path stroke="#b8e9fd" d="M45.257 92.843l-36.48 6.432z" paint-order="fill markers stroke"/>
        <path stroke="#ace5fd" d="M50.62 105.68L18.542 124.2z" paint-order="fill markers stroke"/>
        <path stroke="#a0e2fd" d="M60.05 115.906L36.24 144.28z" paint-order="fill markers stroke"/>
        <path stroke="#94defd" d="M72.41 122.29L59.74 157.1z" paint-order="fill markers stroke"/>
    </g>
</svg>

css 无js动画增量旋转

css animation increment rotation without js

css

svg

css-animations