我正在影响SVG向量，并希望重复动画
这个想法是
layer_1出现并消失
layer_2出现并消失
layer_3出现并消失
layer_4出现并消失
layer_5出现，等待3秒钟，然后消失并再次重复所有操作
我到目前为止有什么
.wrapper {
background: #364254;
width: 100%;
height: 100%;
}
#layer_1,
#layer_2,
#layer_3,
#layer_4,
#layer_5 {
visibility: hidden;
}
#layer_1 {
animation: toggle 0.1s;
}
#layer_2 {
animation: toggle 0.1s;
animation-delay: 0.2s;
}
#layer_3 {
animation: toggle 0.1s;
animation-delay: 0.3s;
}
#layer_4 {
animation: toggle 0.1s;
animation-delay: 0.4s;
}
#layer_5 {
animation: last 3s;
animation-delay: 0.5s;
}
@keyframes toggle {
0% {
visibility: hidden;
}
50% {
visibility: visible;
}
100% {
visibility: hidden;
}
}
@keyframes last {
0% {
visibility: hidden;
}
1% {
visibility: visible;
}
100% {
visibility: visible;
}
}<div class="wrapper">
<svg viewBox="0 0 592.4733 217.3301">
<defs>
<radialGradient
id="radial-gradient"
cx="364.6661"
cy="36.8007"
r="169.8647"
gradientUnits="userSpaceOnUse"
>
<stop
offset="0"
stop-color="#f27075"
/>
<stop
offset="1"
stop-color="#364254"
stop-opacity="0"
/>
</radialGradient>
</defs>
<g style="isolation: isolate">
<g id="zero">
<g>
<circle
cx="283.1367"
cy="118.3301"
r="99"
fill="url(#radial-gradient)"
/>
<g
opacity="0.3"
style="mix-blend-mode: multiply"
>
<path
d="M344.1367,49.33c-22.4594-27.3419-42-2-23,23S367.1367,77.33,344.1367,49.33Z"
fill="none"
stroke="#f27075"
stroke-miterlimit="10"
/>
<path
d="M306.1367,83.33c-14.8913-10.7356-40,18-20,40S349.1367,114.33,306.1367,83.33Z"
fill="none"
stroke="#f27075"
stroke-miterlimit="10"
/>
<path
d="M366.1367,111.33c-6.23-6.7962-13,10-7,18S377.1367,123.33,366.1367,111.33Z"
fill="none"
stroke="#f27075"
stroke-miterlimit="10"
/>
<path
d="M291.1367,28.33c-7.25-.6591-10,8-3,11S302.1367,29.33,291.1367,28.33Z"
fill="none"
stroke="#f27075"
stroke-miterlimit="10"
/>
</g>
</g>
</g>
<g id="layer_5">
<path
d="M571.4733,120.6513,561.306,147.0922a2.2762,2.2762,0,0,1-2.2841,1.5766H542.9943c-1.2305,0-1.93-.8767-1.4074-2.2842l9.9058-25.7333Z"
fill="#fff"
/>
<path
d="M571.235,109.2843l-4.3761,11.367H546.8782l4.33-11.2517L536.9647,72.553c-.5306-1.4074.1769-2.2764,1.4075-2.2764h16.02a2.2613,2.2613,0,0,1,2.2843,1.5766Z"
fill="#fff"
/>
<path
d="M37.8628,148.6688H21.8352a2.2764,2.2764,0,0,1-2.2842-1.5766L5,109.6534,9.353,98.348H29.3337l-4.3069,11.1978L39.27,146.3846C39.7932,147.7921,39.0933,148.6688,37.8628,148.6688Z"
fill="#fff"
/>
<path
d="M163.2612,120.69V33.0454H109.7256L56.19,124.72v10.5441h124.13V120.69Zm-40.269-26.2948V120.69H95.0362l.2384-.4691,13.0282-25.5873c5.6912-10.6594,9.9519-20.6113,14.9278-31.0324h.946C123.7074,74.4988,122.9922,84.4507,122.9922,94.3949Z"
fill="#fff"
/>
<g>
<path
d="M500.1028,120.69V33.0454H459.6645V64.4623c.1307-.2845.2692-.5768.4077-.8614h.9459c-.4768,10.8979-1.1844,20.85-1.1844,30.794V120.69h-27.956l.2383-.4691,8.7907-17.2582h-35.17L393.0315,124.72v27.7176h66.8022v34.5855h40.2691V152.4373h17.0581V120.69Z"
fill="#fff"
/>
<path
d="M455.05,33.0454V64.4623c-4.8067,10.1057-8.99,19.8038-14.52,30.171l-4.2376,8.3291h-35.17l40.83-69.917Z"
fill="#fff"
/>
</g>
<text
transform="translate(112.0068 17)"
font-size="20"
fill="#fff"
font-family="Montserrat-Black, Montserrat"
font-weight="800"
>Er<tspan
x="22.5796"
y="0"
letter-spacing="-0.005em"
>r</tspan>
<tspan
x="31.5996"
y="0"
>or</tspan>
</text>
<polygon
points="191.087 137.571 191.087 154.745 174.028 154.745 174.028 172.18 133.759 172.18 133.759 154.745 66.957 154.745 66.957 137.571 191.087 137.571"
fill="#fff"
/>
<rect
x="129.1448"
y="172.1796"
width="40.269"
height="17.1505"
fill="#fff"
/>
<path
d="M43.8693,72.553,33.9482,98.348H13.9674l10.19-26.4948a2.2672,2.2672,0,0,1,2.2841-1.5766H42.47C43.7,70.2766,44.4,71.1456,43.8693,72.553Z"
fill="#fff"
/>
</g>
<g id="layer_1">
<path
d="M562.4733,120.6513,552.306,147.0922a2.2762,2.2762,0,0,1-2.2841,1.5766H533.9943c-1.2305,0-1.93-.8767-1.4074-2.2842l9.9058-25.7333Z"
fill="#fff"
/>
<path
d="M571.235,120.2843l-4.3761,11.367H546.8782l4.33-11.2517L536.9647,83.553c-.5306-1.4074.1769-2.2764,1.4075-2.2764h16.02a2.2613,2.2613,0,0,1,2.2843,1.5766Z"
fill="#fff"
/>
<path
d="M32.8628,148.6688H16.8352a2.2764,2.2764,0,0,1-2.2842-1.5766L0,109.6534,4.353,98.348H24.3337l-4.3069,11.1978L34.27,146.3846C34.7932,147.7921,34.0933,148.6688,32.8628,148.6688Z"
fill="#fff"
/>
<path
d="M193.2612,120.69V33.0454H139.7256L86.19,124.72v10.5441h124.13V120.69Zm-40.269-26.2948V120.69h-27.956l.2384-.4691,13.0282-25.5873c5.6912-10.6594,9.9519-20.6113,14.9278-31.0324h.946C153.7074,74.4988,152.9922,84.4507,152.9922,94.3949Z"
fill="#fff"
/>
<path
d="M506.1028,113.69V26.0454H465.6645V57.4623c.1307-.2845.2692-.5768.4077-.8614h.9459c-.4768,10.8979-1.1844,20.85-1.1844,30.794V113.69h-27.956l.2383-.4691,8.7907-17.2582h-35.17L399.0315,117.72v27.7176h66.8022v34.5855h40.2691V145.4373h17.0581V113.69Z"
fill="#fff"
/>
<path
d="M442.05,33.0454V64.4623c-4.8067,10.1057-8.99,19.8038-14.52,30.171l-4.2376,8.3291h-35.17l40.83-69.917Z"
fill="#fff"
/>
<text
transform="translate(112.0068 17)"
font-size="20"
fill="#fff"
font-family="Montserrat-Black, Montserrat"
font-weight="800"
>Er<tspan
x="22.5796"
y="0"
letter-spacing="-0.005em"
>r</tspan>
<tspan
x="31.5996"
y="0"
>or</tspan>
</text>
<polygon
points="165.087 137.571 165.087 154.745 148.028 154.745 148.028 172.18 107.759 172.18 107.759 154.745 40.957 154.745 40.957 137.571 165.087 137.571"
fill="#fff"
/>
<rect
x="129.1448"
y="172.1796"
width="40.269"
height="17.1505"
fill="#fff"
/>
<path
d="M47.8693,91.553l-9.9211,25.795H17.9674l10.19-26.4948a2.2672,2.2672,0,0,1,2.2841-1.5766H46.47C47.7,89.2766,48.4,90.1456,47.8693,91.553Z"
fill="#fff"
/>
</g>
<g id="layer_2">
<path
d="M567.4733,123.6513,557.306,150.0922a2.2762,2.2762,0,0,1-2.2841,1.5766H538.9943c-1.2305,0-1.93-.8767-1.4074-2.2842l9.9058-25.7333Z"
fill="#fff"
/>
<path
d="M562.235,120.2843l-4.3761,11.367H537.8782l4.33-11.2517L527.9647,83.553c-.5306-1.4074.1769-2.2764,1.4075-2.2764h16.02a2.2613,2.2613,0,0,1,2.2843,1.5766Z"
fill="#fff"
/>
<path
d="M37.8628,148.6688H21.8352a2.2764,2.2764,0,0,1-2.2842-1.5766L5,109.6534,9.353,98.348H29.3337l-4.3069,11.1978L39.27,146.3846C39.7932,147.7921,39.0933,148.6688,37.8628,148.6688Z"
fill="#fff"
/>
<path
d="M193.2612,120.69V33.0454H139.7256L86.19,124.72v10.5441h124.13V120.69Zm-40.269-26.2948V120.69h-27.956l.2384-.4691,13.0282-25.5873c5.6912-10.6594,9.9519-20.6113,14.9278-31.0324h.946C153.7074,74.4988,152.9922,84.4507,152.9922,94.3949Z"
fill="#fff"
/>
<path
d="M506.1028,119.69V32.0454H465.6645V63.4623c.1307-.2845.2692-.5768.4077-.8614h.9459c-.4768,10.8979-1.1844,20.85-1.1844,30.794V119.69h-27.956l.2383-.4691,8.7907-17.2582h-35.17L399.0315,123.72v27.7176h66.8022v34.5855h40.2691V151.4373h17.0581V119.69Z"
fill="#fff"
/>
<path
d="M445.05,42.0454V73.4623c-4.8067,10.1057-8.99,19.8038-14.52,30.171l-4.2376,8.3291h-35.17l40.83-69.917Z"
fill="#fff"
/>
<text
transform="translate(112.0068 17)"
font-size="20"
fill="#fff"
font-family="Montserrat-Black, Montserrat"
font-weight="800"
>Er<tspan
x="22.5796"
y="0"
letter-spacing="-0.005em"
>r</tspan>
<tspan
x="31.5996"
y="0"
>or</tspan>
</text>
<polygon
points="220.087 137.571 220.087 154.745 203.028 154.745 203.028 172.18 162.759 172.18 162.759 154.745 95.957 154.745 95.957 137.571 220.087 137.571"
fill="#fff"
/>
<rect
x="177.7041"
y="160.6203"
width="17.1505"
height="40.269"
fill="#fff"
/>
<path
d="M52.8693,87.553l-9.9211,25.795H22.9674l10.19-26.4948a2.2672,2.2672,0,0,1,2.2841-1.5766H51.47C52.7,85.2766,53.4,86.1456,52.8693,87.553Z"
fill="#fff"
/>
</g>
<g id="layer_3">
<path
d="M592.4733,114.6513,582.306,141.0922a2.2762,2.2762,0,0,1-2.2841,1.5766H563.9943c-1.2305,0-1.93-.8767-1.4074-2.2842l9.9058-25.7333Z"
fill="#fff"
/>
<path
d="M590.235,163.2843l-4.3761,11.367H565.8782l4.33-11.2517L555.9647,126.553c-.5306-1.4074.1769-2.2764,1.4075-2.2764h16.02a2.2613,2.2613,0,0,1,2.2843,1.5766Z"
fill="#fff"
/>
<path
d="M48.8628,167.6688H32.8352a2.2764,2.2764,0,0,1-2.2842-1.5766L16,128.6534l4.353-11.3054H40.3337l-4.3069,11.1978L50.27,165.3846C50.7932,166.7921,50.0933,167.6688,48.8628,167.6688Z"
fill="#fff"
/>
<path
d="M169.2612,131.69V44.0454H115.7256L62.19,135.72v10.5441h124.13V131.69Zm-40.269-26.2948V131.69h-27.956l.2384-.4691,13.0282-25.5873c5.6912-10.6594,9.9519-20.6113,14.9278-31.0324h.946C129.7074,85.4988,128.9922,95.4507,128.9922,105.3949Z"
fill="#fff"
/>
<path
d="M506.1067,119.69V32.05h-40.44V63.46c.13-.28.27-.57.41-.86h.94c-.48,10.9-1.18,20.85-1.18,30.79v26.3h-27.96l.24-.47,8.79-17.26h-35.17l-12.71,21.76v27.72h66.81v6.89h40.27v-6.89h17.05V119.69Z"
fill="#fff"
/>
<path
d="M477.05,12.0454V43.4623c-4.8067,10.1057-8.99,19.8038-14.52,30.171l-4.2376,8.3291h-35.17l40.83-69.917Z"
fill="#fff"
/>
<text
transform="translate(112.0068 17)"
font-size="20"
fill="#fff"
font-family="Montserrat-Black, Montserrat"
font-weight="800"
>Er<tspan
x="22.5796"
y="0"
letter-spacing="-0.005em"
>r</tspan>
<tspan
x="31.5996"
y="0"
>or</tspan>
</text>
<polygon
points="204.087 124.571 204.087 141.745 187.028 141.745 187.028 159.18 146.759 159.18 146.759 141.745 79.957 141.745 79.957 124.571 204.087 124.571"
fill="#fff"
/>
<rect
x="209.7041"
y="112.6203"
width="17.1505"
height="40.269"
fill="#fff"
/>
<path
d="M52.8693,87.553l-9.9211,25.795H22.9674l10.19-26.4948a2.2672,2.2672,0,0,1,2.2841-1.5766H51.47C52.7,85.2766,53.4,86.1456,52.8693,87.553Z"
fill="#fff"
/>
<rect
x="447.8366"
y="158.3301"
width="40.27"
height="27.69"
fill="#fff"
/>
</g>
<g id="layer_4">
<path
d="M578.4733,140.6513,568.306,167.0922a2.2762,2.2762,0,0,1-2.2841,1.5766H549.9943c-1.2305,0-1.93-.8767-1.4074-2.2842l9.9058-25.7333Z"
fill="#fff"
/>
<path
d="M590.235,163.2843l-4.3761,11.367H565.8782l4.33-11.2517L555.9647,126.553c-.5306-1.4074.1769-2.2764,1.4075-2.2764h16.02a2.2613,2.2613,0,0,1,2.2843,1.5766Z"
fill="#fff"
/>
<path
d="M48.8628,167.6688H32.8352a2.2764,2.2764,0,0,1-2.2842-1.5766L16,128.6534l4.353-11.3054H40.3337l-4.3069,11.1978L50.27,165.3846C50.7932,166.7921,50.0933,167.6688,48.8628,167.6688Z"
fill="#fff"
/>
<path
d="M169.2612,131.69V44.0454H115.7256L62.19,135.72v10.5441h124.13V131.69Zm-40.269-26.2948V131.69h-27.956l.2384-.4691,13.0282-25.5873c5.6912-10.6594,9.9519-20.6113,14.9278-31.0324h.946C129.7074,85.4988,128.9922,95.4507,128.9922,105.3949Z"
fill="#fff"
/>
<path
d="M506.1067,119.69V32.05h-40.44V63.46c.13-.28.27-.57.41-.86h.94c-.48,10.9-1.18,20.85-1.18,30.79v26.3h-27.96l.24-.47,8.79-17.26h-35.17l-12.71,21.76v27.72h66.81v6.89h40.27v-6.89h17.05V119.69Z"
fill="#fff"
/>
<path
d="M485.05,24.0454V55.4623c-4.8067,10.1057-8.99,19.8038-14.52,30.171l-4.2376,8.3291h-35.17l40.83-69.917Z"
fill="#fff"
/>
<polygon
points="186.087 162.571 186.087 179.745 169.028 179.745 169.028 197.18 128.759 197.18 128.759 179.745 61.957 179.745 61.957 162.571 186.087 162.571"
fill="#fff"
/>
<rect
x="71.7041"
y="74.6203"
width="17.1505"
height="40.269"
fill="#fff"
/>
<path
d="M52.8693,87.553l-9.9211,25.795H22.9674l10.19-26.4948a2.2672,2.2672,0,0,1,2.2841-1.5766H51.47C52.7,85.2766,53.4,86.1456,52.8693,87.553Z"
fill="#fff"
/>
<rect
x="449.8366"
y="176.3301"
width="40.27"
height="27.69"
fill="#fff"
/>
<text
transform="translate(112.0068 17)"
font-size="20"
fill="#fff"
font-family="Montserrat-Black, Montserrat"
font-weight="800"
>Er<tspan
x="22.5796"
y="0"
letter-spacing="-0.005em"
>r</tspan>
<tspan
x="31.5996"
y="0"
>or</tspan>
</text>
</g>
</g>
</svg>
</div>
有人可以帮我吗？
答案 0 :(得分：0)
尝试一下，让我知道您是否在寻找它：
.wrapper {
background: #364254;
width: 100%;
height: 100%;
}
@-webkit-keyframes blink {
from { opacity: 0 }
15% { opacity: 0 }
16% { opacity: 1 }
18% { opacity: 1 }
19% { opacity: 0 }
to { opacity: 0 }
}
@-o-keyframes blink {
from { opacity: 0 }
15% { opacity: 0 }
16% { opacity: 1 }
18% { opacity: 1 }
19% { opacity: 0 }
to { opacity: 0 }
}
@-moz-keyframes blink {
from { opacity: 0 }
15% { opacity: 0 }
16% { opacity: 1 }
18% { opacity: 1 }
19% { opacity: 0 }
to { opacity: 0 }
}
@keyframes blink {
from { opacity: 0 }
15% { opacity: 0 }
16% { opacity: 1 }
18% { opacity: 1 }
19% { opacity: 0 }
to { opacity: 0 }
}
@-webkit-keyframes last {
from { opacity: 0 }
1% { opacity: 1 }
90% { opacity: 1 }
to { opacity: 0 }
}
@-o-keyframes last {
from { opacity: 0 }
1% { opacity: 1 }
90% { opacity: 1 }
to { opacity: 0 }
}
@-moz-keyframes last {
from { opacity: 0 }
1% { opacity: 1 }
90% { opacity: 1 }
to { opacity: 0 }
}
@keyframes last {
from { opacity: 0 }
1% { opacity: 1 }
90% { opacity: 1 }
to { opacity: 0 }
}
#layer_1,
#layer_2,
#layer_3,
#layer_4 {
opacity: 0;
animation-name: blink;
animation-duration: 3.8s;
animation-iteration-count: infinite;
}
#layer_2 {
animation-delay: .2s;
}
#layer_3 {
animation-delay: .4s;
}
#layer_4 {
animation-delay: .6s;
}
#layer_5 {
opacity: 0;
animation-name: last;
animation-duration: 3.8s;
animation-delay: .8s;
animation-iteration-count: infinite;
}