关键帧 CSS SVG 路径上的多个延迟动画
[英]Keyframes CSS multiple delayed animations on SVG paths
问题描述
I'm trying to create such a sort of sequence of a loop icons showing inside my SVG design.
我正在尝试创建这样一种循环图标序列，显示在我的 SVG 设计中。 I've tryed using an animation-delay for each path but all the paths are executed at the same time.我尝试为每个路径使用动画延迟，但所有路径都是同时执行的。
Here is my codepen: https://codepen.io/ioiocodepen/pen/oNYGwgE这是我的代码笔： https://codepen.io/ioiocodepen/pen/oNYGwgE
HTML: HTML：
<div class="badgeconsul">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" version="1.1">
<metadata id="metadata19">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs id="defs17">
<pattern id="EMFhbasepattern" patternUnits="userSpaceOnUse" width="6" height="6" x="0" y="0" />
</defs>
<g id="g12">
<path d="m445.273 216.464c-2.573-6.131-5.003-11.922-5.003-16.823 0-4.903 2.43-10.694 5.003-16.826 3.724-8.875 7.575-18.052 5.403-27.604-2.254-9.913-10.212-16.936-17.233-23.131-4.832-4.264-9.396-8.292-11.386-12.415-2.061-4.27-2.383-10.449-2.726-16.991-.484-9.252-1.032-19.739-7.25-27.524-6.248-7.823-16.378-10.686-25.317-13.211-6.278-1.774-12.209-3.45-15.875-6.377-3.627-2.896-6.558-8.281-9.661-13.982-4.456-8.187-9.506-17.466-18.582-21.845-8.917-4.302-18.783-2.582-28.326-.917-6.488 1.131-12.617 2.2-17.304 1.135-4.386-.997-9.29-4.521-14.481-8.253-7.631-5.484-16.279-11.7-26.535-11.7-10.258 0-18.907 6.216-26.539 11.7-5.192 3.732-10.097 7.256-14.484 8.254-4.688 1.066-10.817-.003-17.305-1.134-9.542-1.663-19.41-3.383-28.328.919-9.076 4.379-14.126 13.66-18.583 21.848-3.103 5.702-6.034 11.087-9.661 13.983-3.666 2.928-9.597 4.604-15.875 6.378-8.938 2.526-19.07 5.389-25.317 13.213-6.216 7.785-6.764 18.271-7.247 27.522-.342 6.542-.664 12.72-2.724 16.99-1.989 4.122-6.553 8.15-11.385 12.414-7.021 6.196-14.979 13.218-17.231 23.131-2.171 9.55 1.68 18.726 5.404 27.6 2.573 6.13 5.003 11.921 5.003 16.822 0 4.903-2.43 10.694-5.003 16.826-3.724 8.875-7.575 18.052-5.403 27.604 2.254 9.913 10.212 16.935 17.233 23.131 4.832 4.264 9.396 8.292 11.386 12.415 2.061 4.27 2.383 10.449 2.726 16.991.484 9.252 1.032 19.739 7.25 27.524 6.248 7.823 16.378 10.686 25.317 13.211 6.279 1.773 12.209 3.449 15.875 6.376 2.361 1.885 4.426 4.827 6.436 8.221l-50.551 118.106c-1.079 2.521-.696 5.43.999 7.586 1.695 2.155 4.432 3.215 7.136 2.762l41.975-7.035 24.194 35.376c1.406 2.056 3.73 3.266 6.189 3.266.243 0 .488-.012.733-.036 2.724-.267 5.086-1.997 6.164-4.513l49.865-116.497c6.429 4.378 13.578 8.327 21.751 8.327s15.322-3.948 21.752-8.325l49.865 116.495c1.077 2.517 3.439 4.246 6.164 4.513.245.024.489.036.733.036 2.459 0 4.783-1.21 6.189-3.266l24.194-35.376 41.975 7.035c2.704.453 5.441-.605 7.136-2.762 1.695-2.156 2.078-5.065.999-7.586l-50.552-118.099c2.013-3.4 4.08-6.348 6.444-8.235 3.666-2.928 9.597-4.604 15.875-6.378 8.938-2.526 19.069-5.389 25.316-13.212 6.216-7.785 6.764-18.271 7.247-27.523.342-6.542.664-12.72 2.724-16.99 1.989-4.123 6.553-8.15 11.385-12.414 7.021-6.196 14.978-13.218 17.231-23.13 2.171-9.551-1.68-18.727-5.404-27.6zm-269.305 272.528-19.188-28.057c-1.649-2.412-4.55-3.645-7.43-3.163l-33.166 5.559 40.756-95.213c3.229 4.68 7.139 8.884 12.414 11.429 2.862 1.381 5.822 2.136 8.836 2.477l-20.92 48.552c-1.639 3.804.116 8.216 3.92 9.855.967.417 1.974.614 2.964.614 2.904 0 5.669-1.698 6.891-4.534l23.951-55.585c.897-.152 1.792-.306 2.684-.462 6.489-1.132 12.616-2.2 17.304-1.135 2.11.48 4.342 1.548 6.666 2.939zm186.682-31.22c-2.88-.481-5.781.751-7.43 3.163l-19.188 28.057-45.681-106.721c2.326-1.393 4.56-2.463 6.672-2.943 4.688-1.066 10.816.002 17.306 1.133.888.155 1.781.309 2.674.46l23.953 55.59c1.222 2.837 3.987 4.534 6.891 4.534.991 0 1.997-.197 2.964-.614 3.804-1.639 5.559-6.052 3.92-9.855l-20.922-48.555c3.019-.341 5.982-1.096 8.847-2.478 5.271-2.543 9.18-6.743 12.407-11.419l40.753 95.208zm73.4-217.033c-1.18 5.192-6.693 10.057-12.529 15.208-5.735 5.061-11.666 10.294-14.97 17.144-3.372 6.989-3.79 14.989-4.194 22.726-.401 7.675-.779 14.926-3.989 18.945-3.241 4.059-10.251 6.04-17.674 8.137-7.435 2.101-15.124 4.274-21.157 9.092-5.994 4.787-9.797 11.775-13.476 18.534-3.702 6.802-7.199 13.227-11.926 15.508-4.575 2.207-11.695.965-19.233-.348-7.661-1.335-15.584-2.716-23.207-.983-7.349 1.671-13.736 6.261-19.913 10.7-6.355 4.567-12.358 8.881-17.785 8.881-5.425 0-11.426-4.313-17.78-8.88-6.176-4.439-12.562-9.029-19.911-10.7-2.556-.581-5.144-.812-7.746-.812-5.159 0-10.368.908-15.46 1.796-7.537 1.314-14.657 2.557-19.231.35-4.727-2.28-8.223-8.705-11.925-15.506-3.678-6.758-7.482-13.747-13.476-18.533-6.033-4.817-13.722-6.989-21.157-9.09-7.422-2.097-14.433-4.078-17.674-8.136-3.21-4.021-3.589-11.271-3.991-18.948-.404-7.736-.823-15.736-4.195-22.726-3.305-6.849-9.235-12.082-14.971-17.143-5.837-5.151-11.351-10.016-12.531-15.209-1.105-4.86 1.67-11.473 4.608-18.475 3.034-7.231 6.171-14.708 6.171-22.63 0-7.921-3.138-15.397-6.172-22.627-2.938-7-5.713-13.612-4.609-18.47 1.18-5.192 6.693-10.058 12.53-15.208 5.735-5.061 11.666-10.294 14.969-17.143 3.372-6.99 3.79-14.989 4.194-22.726.401-7.676.779-14.926 3.989-18.945 3.241-4.059 10.252-6.04 17.674-8.138 7.435-2.101 15.124-4.273 21.156-9.091 5.994-4.787 9.797-11.775 13.476-18.535 3.702-6.802 7.199-13.227 11.926-15.508 4.574-2.208 11.694-.966 19.233.348 7.661 1.335 15.582 2.717 23.207.983 7.349-1.671 13.736-6.261 19.913-10.7 6.356-4.567 12.359-8.881 17.786-8.881 5.425 0 11.426 4.313 17.78 8.88 6.176 4.439 12.562 9.029 19.911 10.7 7.624 1.734 15.546.351 23.206-.985 7.538-1.314 14.656-2.556 19.231-.35 4.727 2.28 8.223 8.705 11.924 15.506 3.679 6.758 7.482 13.747 13.477 18.533 6.033 4.817 13.722 6.989 21.157 9.09 7.422 2.097 14.434 4.078 17.675 8.136 3.21 4.021 3.589 11.271 3.991 18.948.404 7.736.823 15.736 4.195 22.726 3.305 6.849 9.235 12.082 14.971 17.143 5.837 5.151 11.351 10.016 12.531 15.209 1.105 4.859-1.67 11.473-4.608 18.475-3.034 7.23-6.171 14.708-6.171 22.63s3.138 15.398 6.172 22.628c2.937 7 5.712 13.611 4.608 18.47z" id="path2" style="fill:#edf8f8;fill-opacity:1" />
<g id="archirotanti">
<path style="fill:#22b573;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.752163" d="m 390.76527,150.49067 c -9.52738,-27.83 -27.57928,-51.899204 -52.14993,-69.449654 -31.3401,-22.06343 -69.19894,-30.838658 -107.05778,-24.319917 -35.60236,6.0173 -66.94247,24.82136 -89.00589,53.152821 -8.02306,-9.77813 -8.02306,-9.77813 -8.02306,-9.77813 -2.25648,-2.757918 -6.76947,-1.253599 -7.02018,2.25651 -4.01154,48.3891 -4.01154,48.3891 -4.01154,48.3891 -0.25071,3.51009 3.76082,5.76658 6.26802,3.51009 37.60812,-31.08937 37.60812,-31.08937 37.60812,-31.08937 2.75793,-2.2565 1.50433,-6.76947 -2.25649,-7.02018 -11.03171,-0.75216 -11.03171,-0.75216 -11.03171,-0.75216 20.05767,-24.821369 48.1384,-41.118225 79.72921,-46.383361 34.34876,-5.766579 68.94822,2.005766 97.5304,22.314155 22.06343,15.544696 38.36028,37.106686 47.38624,62.178756 0.25071,1.25361 1.50432,1.75504 2.75793,1.50432 2.25648,-0.50144 4.76369,-1.00287 7.27089,-1.25359 1.50433,0 2.50721,-1.75505 2.00577,-3.25939 z" id="arco1" />
<path style="fill:#8cc63f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.752163" d="m 121.23472,246.8187 c 9.52738,27.83 27.57928,51.8992 52.14993,69.44965 31.3401,22.06343 69.19894,30.83866 107.05778,24.31992 35.60236,-6.0173 66.94247,-24.82136 89.00589,-53.15282 8.02306,9.77813 8.02306,9.77813 8.02306,9.77813 2.25648,2.75792 6.76947,1.2536 7.02018,-2.25651 4.01154,-48.3891 4.01154,-48.3891 4.01154,-48.3891 0.25071,-3.51009 -3.76082,-5.76658 -6.26802,-3.51009 -37.60812,31.08937 -37.60812,31.08937 -37.60812,31.08937 -2.75793,2.2565 -1.50433,6.76947 2.25649,7.02018 11.03171,0.75216 11.03171,0.75216 11.03171,0.75216 -20.05767,24.82137 -48.1384,41.11823 -79.72921,46.38336 -34.34876,5.76658 -68.94822,-2.00576 -97.5304,-22.31415 -22.06343,-15.5447 -38.36028,-37.10669 -47.38624,-62.17876 -0.25071,-1.25361 -1.50432,-1.75504 -2.75793,-1.50432 -2.25648,0.50144 -4.76369,1.00287 -7.27089,1.25359 -1.50433,0 -2.50721,1.75505 -2.00577,3.25939 z" id="arco2" />
</g>
<g id="consulenze-ambientali" transform="matrix(0.32788442,0,0,0.32788442,178.62503,136.06477)" style="fill:#15364c;fill-opacity:1">
<path d="M 352,200 V 40 C 351.97266,17.917969 334.08203,0.0273438 312,0 H 40 C 17.917969,0.0273438 0.0273438,17.917969 0,40 v 160 c 0.0273438,22.08203 17.917969,39.97266 40,40 h 35.878906 l 37.601564,52.64844 c 2.01953,2.83984 5.64062,4.04687 8.95703,2.98437 3.32031,-1.0625 5.56641,-4.14844 5.5625,-7.63281 v -48 h 184 c 22.08203,-0.0273 39.97266,-17.91797 40,-40 z m -232,24 c -4.41797,0 -8,3.58203 -8,8 v 31.03125 L 86.511719,227.35156 C 85.011719,225.25 82.585938,224 80,224 H 40 C 26.746094,224 16,213.25391 16,200 V 40 C 16,26.746094 26.746094,16 40,16 h 272 c 13.25391,0 24,10.746094 24,24 v 160 c 0,13.25391 -10.74609,24 -24,24 z m 0,0" id="path6-9" style="fill:#15364c;fill-opacity:1" />
<path d="m 440,152 h -72 v 16 h 72 c 13.25391,0 24,10.74609 24,24 v 144 c 0,13.25391 -10.74609,24 -24,24 h -72 c -2.375,0 -4.625,1.05469 -6.14453,2.87891 L 336,393.90234 V 368 c 0,-4.41797 -3.58203,-8 -8,-8 H 184 c -13.25391,0 -24,-10.74609 -24,-24 v -80 h -16 v 80 c 0.0273,22.08203 17.91797,39.97266 40,40 h 136 v 40 c 0,3.36719 2.10937,6.37109 5.27734,7.51953 3.16407,1.14453 6.71094,0.1875 8.86719,-2.39844 L 371.74219,376 H 440 c 22.08203,-0.0273 39.97266,-17.91797 40,-40 V 192 c -0.0273,-22.08203 -17.91797,-39.97266 -40,-40 z m 0,0" id="path8" style="fill:#15364c;fill-opacity:1" />
<path d="m 200,256 h 224 v 16 H 200 Z m 0,0" id="path10-9" style="fill:#15364c;fill-opacity:1" />
<path d="m 200,304 h 224 v 16 H 200 Z m 0,0" id="path12-4" style="fill:#15364c;fill-opacity:1" />
<path d="m 376,208 h 48 v 16 h -48 z m 0,0" id="path14" style="fill:#15364c;fill-opacity:1" />
<g id="g10" transform="matrix(0.36300873,0,0,0.36300873,85.5,25.023355)" style="fill:#15364c;fill-opacity:1">
<g id="g8" style="fill:#15364c;fill-opacity:1">
<g id="g6-5" style="fill:#15364c;fill-opacity:1">
<path d="m 468.04,91.687 -205,-90 c -5.147,-2.26 -11.007,-2.249 -16.146,0.029 l -203,90 C 36.663,94.922 32,102.089 32,110 v 158 c 0,59.712 23.597,120.752 64.741,167.468 20.695,23.498 44.553,42.092 70.912,55.266 C 195.887,504.845 225.611,512 256,512 c 42.552,0 83.967,-13.773 119.769,-39.829 8.931,-6.5 10.902,-19.009 4.402,-27.94 -6.5,-8.931 -19.009,-10.901 -27.94,-4.402 C 323.313,460.875 290.037,472 256,472 159.701,472 72,374.766 72,268 V 123.01 L 255.04,41.86 440,123.062 V 268 c 0,36.829 -10.58,74.1 -30.597,107.782 -5.643,9.496 -2.52,21.768 6.976,27.411 9.497,5.643 21.768,2.52 27.411,-6.976 C 467.479,356.354 480,312.018 480,268 V 110 c 0,-7.936 -4.693,-15.122 -11.96,-18.313 z" id="path2-9" style="fill:#15364c;fill-opacity:1" />
<path d="M 351.385,157.503 227.379,312.451 157.864,245.586 c -7.961,-7.657 -20.622,-7.412 -28.279,0.549 -7.657,7.961 -7.412,20.622 0.549,28.279 l 70.485,67.798 c 0.028,0.027 0.057,0.054 0.085,0.082 7.299,6.939 16.746,10.707 26.754,10.707 0.537,0 1.074,-0.011 1.612,-0.033 10.601,-0.426 20.337,-5.015 27.415,-12.919 0.246,-0.275 0.484,-0.557 0.715,-0.845 L 382.615,182.496 c 6.902,-8.624 5.505,-21.21 -3.118,-28.112 -8.625,-6.902 -21.21,-5.506 -28.112,3.119 z" id="path4-1" style="fill:#15364c;fill-opacity:1" />
</g>
</g>
</g>
</g>
<g id="sanzioni-ambientali" transform="matrix(0.32888922,0,0,0.32888922,173.88687,120.51713)" style="fill:#15364c;fill-opacity:1">
<path d="M 161.144,234.5 H 158.8 a 6,6 0 0 0 0,12 h 2.346 a 6,6 0 0 0 0,-12 z" id="path2-5" style="fill:#15364c;fill-opacity:1" />
<path d="M 202.288,234.5 H 184.56 a 6,6 0 0 0 0,12 h 17.728 a 6,6 0 0 0 0,-12 z" id="path4" style="fill:#15364c;fill-opacity:1" />
<path d="M 353.169,234.5 H 226.084 a 6,6 0 0 0 0,12 h 127.085 a 6,6 0 0 0 0,-12 z" id="path6" style="fill:#15364c;fill-opacity:1" />
<path d="m 334.741,141.212 h 11.428 a 6,6 0 0 0 0,-12 h -11.428 a 6,6 0 0 0 0,12 z" id="path10" style="fill:#15364c;fill-opacity:1" />
<path d="m 258.418,141.212 h 32.822 a 6,6 0 0 0 0,-12 h -32.822 a 6,6 0 0 0 0,12 z" id="path12" style="fill:#15364c;fill-opacity:1" />
<path d="M 161.144,194.5 H 158.8 a 6,6 0 0 0 0,12 h 2.346 a 6,6 0 0 0 0,-12 z" id="path16" style="fill:#15364c;fill-opacity:1" />
<path d="M 202.288,194.5 H 184.56 a 6,6 0 0 0 0,12 h 17.728 a 6,6 0 0 0 0,-12 z" id="path18" style="fill:#15364c;fill-opacity:1" />
<path d="m 220.084,200.5 a 6,6 0 0 0 6,6 h 127.085 a 6,6 0 0 0 0,-12 H 226.084 a 6,6 0 0 0 -6,6 z" id="path20" style="fill:#15364c;fill-opacity:1" />
<path d="M 161.144,274.5 H 158.8 a 6,6 0 0 0 0,12 h 2.346 a 6,6 0 0 0 0,-12 z" id="path22" style="fill:#15364c;fill-opacity:1" />
<path d="M 202.288,274.5 H 184.56 a 6,6 0 0 0 0,12 h 17.728 a 6,6 0 0 0 0,-12 z" id="path24" style="fill:#15364c;fill-opacity:1" />
<path d="M 353.169,274.5 H 226.084 a 6,6 0 0 0 0,12 h 127.085 a 6,6 0 0 0 0,-12 z" id="path26" style="fill:#15364c;fill-opacity:1" />
<path d="M 161.144,314.5 H 158.8 a 6,6 0 0 0 0,12 h 2.346 a 6,6 0 0 0 0,-12 z" id="path28" style="fill:#15364c;fill-opacity:1" />
<path d="M 202.288,314.5 H 184.56 a 6,6 0 0 0 0,12 h 17.728 a 6,6 0 0 0 0,-12 z" id="path30" style="fill:#15364c;fill-opacity:1" />
<path d="M 161.144,354.5 H 158.8 a 6,6 0 0 0 0,12 h 2.346 a 6,6 0 0 0 0,-12 z" id="path32" style="fill:#15364c;fill-opacity:1" />
<path d="M 202.288,354.5 H 184.56 a 6,6 0 1 0 0,12 h 17.728 a 6,6 0 0 0 0,-12 z" id="path34" style="fill:#15364c;fill-opacity:1" />
<path d="m 100.382,298.484 a 6,6 0 0 0 -6,6 v 113.493 a 6,6 0 0 0 12,0 V 304.484 a 6,6 0 0 0 -6,-6 z" id="path36" style="fill:#15364c;fill-opacity:1" />
<path d="m 93.776,282.362 a 6,6 0 0 0 12,0 v -40.614 a 6,6 0 0 0 -12,0 z" id="path38" style="fill:#15364c;fill-opacity:1" />
<path d="m 99.776,225.362 a 6,6 0 0 0 6,-6 v -5.614 a 6,6 0 0 0 -12,0 v 5.614 a 6,6 0 0 0 6,6 z" id="path40" style="fill:#15364c;fill-opacity:1" />
<path d="m 433.015,353.606 a 8.775,8.775 0 0 0 -2.936,0.639 l -1.835,0.858 a 32.8,32.8 0 0 1 -29.079,-0.725 6,6 0 0 0 -2.808,-0.7 H 392.5 v -3.05 a 6,6 0 0 0 -12,0 v 3.05 h -4.142 a 6,6 0 0 0 -2.807,0.7 32.793,32.793 0 0 1 -29.079,0.725 l -1.835,-0.858 a 6.269,6.269 0 0 0 -8.439,2.967 l -17.952,41.246 a 6,6 0 0 0 -3.195,5.3 c 0,13.867 11.955,25.149 26.649,25.149 14.694,0 26.65,-11.282 26.65,-25.149 a 6,6 0 0 0 -3.2,-5.3 l -12.619,-28.994 a 44.76,44.76 0 0 0 27.256,-3.783 h 2.713 v 51.572 h -1.19 a 17.855,17.855 0 0 0 -17.854,17.853 v 5.143 a 6,6 0 0 0 6,6 l 38.087,0.013 a 6,6 0 0 0 6,-6 v -5.151 A 17.875,17.875 0 0 0 393.7,417.258 h -1.2 v -51.577 h 2.426 a 44.893,44.893 0 0 0 27.257,3.779 l -12.62,29 a 6,6 0 0 0 -3.2,5.3 c 0,13.867 11.955,25.149 26.65,25.149 14.695,0 26.65,-11.282 26.65,-25.149 a 6,6 0 0 0 -3.2,-5.3 l -17.952,-41.245 a 6,6 0 0 0 -5.496,-3.609 z m -93.315,21.035 10.063,23.119 h -20.126 z m 13.033,35.119 a 15.454,15.454 0 0 1 -26.066,0 z m 40.959,19.5 a 5.863,5.863 0 0 1 5.79,5 l -25.963,-0.009 a 5.856,5.856 0 0 1 5.792,-5 z m 39.324,-12.349 a 14.932,14.932 0 0 1 -13.034,-7.149 h 26.068 a 14.931,14.931 0 0 1 -13.035,7.147 z m -10.063,-19.151 10.062,-23.119 10.062,23.119 z" id="path42" style="fill:#15364c;fill-opacity:1" />
<path d="M 393.233,289.621 V 56.5 a 46.052,46.052 0 0 0 -46,-46 L 75.66,10.513 c -0.167,0 -0.332,-0.013 -0.5,-0.013 A 55.636,55.636 0 0 0 19.589,66.072 v 115.76 a 6,6 0 0 0 9.932,4.532 l 24.289,-21.07 19.653,20.672 a 6,6 0 0 0 4.258,1.866 5.924,5.924 0 0 0 4.311,-1.735 l 20.492,-20.283 16.209,18.986 v 249.7 a 6,6 0 0 0 9.748,4.686 l 29.07,-23.253 29.07,23.253 a 6,6 0 0 0 7.5,0 l 29.066,-23.251 29.063,23.251 a 6,6 0 0 0 7.5,0 l 23.526,-18.82 A 106.055,106.055 0 1 0 393.233,289.621 Z M 226.336,366.5 h 57.983 a 106.3,106.3 0 0 0 -3.4,40.375 l -24.927,19.941 -29.063,-23.251 a 6,6 0 0 0 -7.5,0 L 190.363,426.816 161.3,403.564 a 6,6 0 0 0 -7.5,0 l -23.07,18.453 V 143 a 6,6 0 0 0 -6,-6 6,6 0 0 0 -6,6 v 23.318 L 107.458,153.11 a 6,6 0 0 0 -8.784,-0.368 L 77.941,173.261 58.557,152.872 a 6,6 0 0 0 -8.281,-0.4 l -18.687,16.21 V 66.845 c 0,-24.381 19.951,-44.756 44.328,-44.339 a 43.624,43.624 0 0 1 42.816,43.566 V 103 a 6,6 0 0 0 6,6 6,6 0 0 0 6,-6 V 66.072 A 55.487,55.487 0 0 0 109.592,22.5 h 237.641 a 34,34 0 0 1 34,34 V 289.518 A 105.576,105.576 0 0 0 317.919,314.5 h -91.583 a 6.167,6.167 0 0 0 -6.249,5.815 6,6 0 0 0 6,6.185 h 79.757 a 106.283,106.283 0 0 0 -17.311,28 h -62.449 a 6,6 0 0 0 -6,6.185 6.167,6.167 0 0 0 6.252,5.815 z m 160.021,123 a 94.054,94.054 0 1 1 94.054,-94.054 94.16,94.16 0 0 1 -94.054,94.054 z" id="path44" style="fill:#15364c;fill-opacity:1" />
<g id="g6" transform="matrix(0.73272421,0,0,0.73272421,25.883239,-54.993514)" style="fill:#15364c;fill-opacity:1">
<path d="m 335.464,127.088 c -0.215,-3.81 -3.256,-6.851 -7.066,-7.066 -20.186,-1.13 -40.88,7.318 -56.763,23.201 -4.042,4.042 -7.602,8.395 -10.645,12.973 -8.316,12.51 -12.49,27.319 -12.49,42.34 v 47.045 l -8.914,-8.914 c -0.033,-17.093 -7.533,-34.312 -20.935,-47.712 -14.285,-14.286 -32.895,-21.884 -51.092,-20.865 -3.81,0.215 -6.851,3.256 -7.066,7.066 -1.025,18.185 6.58,36.807 20.865,51.092 13.357,13.358 30.506,20.868 47.544,20.95 l 14.759,14.76 c 3.12,3.119 4.838,7.267 4.838,11.679 v 29.767 c 0,4.107 3.164,7.688 7.269,7.811 4.247,0.128 7.731,-3.278 7.731,-7.497 V 206.99 c 17.562,-1.176 34.975,-9.35 48.764,-23.138 15.883,-15.883 24.339,-36.573 23.201,-56.764 z m -143.499,88.553 c -9.157,-9.157 -14.957,-20.842 -16.273,-32.353 11.511,1.317 23.196,7.116 32.353,16.273 9.157,9.157 14.957,20.842 16.274,32.354 -11.511,-1.318 -23.198,-7.118 -32.354,-16.274 z m 109.692,-42.396 c -10.756,10.755 -24.58,17.453 -38.111,18.695 1.242,-13.531 7.939,-27.354 18.695,-38.11 10.756,-10.756 24.579,-17.454 38.11,-18.695 -1.241,13.531 -7.938,27.354 -18.694,38.11 z" id="path4-9" style="fill:#15364c;fill-opacity:1" />
</g>
</g>
</g>
</svg>
<h3 id="title-consulenze-ambientali" class="section-subtitle text-center">
CONSULENZE e PARERI AMBIENTALI
</h3>
<h3 id="title-sanzioni-ambientali" class="section-subtitle text-center">
RICORSI PER SANZIONI AMBIENTALI
</h3>
</div>
CSS: CSS：
.badgeconsul svg {
height: 100%;
width: 100%;
}
.badgeconsul h3 {
font-weight: bold;
position: absolute;
margin: auto;
width: 100%;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#archirotanti {
-webkit-animation: rotating 3s linear infinite;
-moz-animation: rotating 3s linear infinite;
-ms-animation: rotating 3s linear infinite;
-o-animation: rotating 3s linear infinite;
animation: rotating 3s linear infinite;
transform-box: fill-box;
transform-origin: 50% 50%;
}
#arco1 {
fill: #8cc63f;
-webkit-animation: changecolorarco1 6s linear infinite;
-moz-animation: changecolorarco1 6s linear infinite;
-ms-animation: changecolorarco1 6s linear infinite;
-o-animation: changecolorarco1 6s linear infinite;
animation: changecolorarco1 6s linear infinite;
}
#arco2 {
fill: #22b573;
-webkit-animation: changecolorarco2 6s linear infinite;
-moz-animation: changecolorarco2 6s linear infinite;
-ms-animation: changecolorarco2 6s linear infinite;
-o-animation: changecolorarco2 6s linear infinite;
animation: changecolorarco2 6s linear infinite;
}
@keyframes changecolorarco1 {
0% {
fill: #22b573;
}
50% {
fill: #8cc63f;
}
100% {
fill: #22b573;
}
}
@keyframes changecolorarco2 {
0% {
fill: #8cc63f;
}
50% {
fill: #22b573;
}
100% {
fill: #8cc63f;
}
}
/* animazione paths icone servizi home */
@keyframes opacitypathicon {
0% {opacity: 0}
25% {opacity: 0.75}
50% {opacity: 1}
75% {opacity: 0.75}
100% {opacity: 0}
}
/* elementi icone da animare */
#consulenze-ambientali, #title-consulenze-ambientali {
opacity: 0;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation: opacitypathicon 3s linear infinite;
-moz-animation: opacitypathicon 3s linear infinite;
-ms-animation: opacitypathicon 3s linear infinite;
-o-animation: opacitypathicon 3s linear infinite;
animation: opacitypathicon 3s linear infinite;
}
#sanzioni-ambientali, #title-sanzioni-ambientali {
opacity: 0;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation: opacitypathicon 3s linear infinite;
-moz-animation: opacitypathicon 3s linear infinite;
-ms-animation: opacitypathicon 3s linear infinite;
-o-animation: opacitypathicon 3s linear infinite;
animation: opacitypathicon 3s linear infinite;
}
What I want to do is something like this:我想做的是这样的：
path1 -> start at time 0 -> opacity 0, then at 50% opacity at 100% then after 3sec opacity to 0 again path2 -> start at time 3s -> opacity 0, then at 50% opacity at 100% then after 3sec opacity to 0 again and so on... path1 -> 从时间 0 开始 -> 不透明度 0，然后在 100% 时以 50% 不透明度，然后在 3 秒后不透明度再次变为 0 path2 -> 在时间 3s -> 不透明度 0，然后在 100% 时以 50% 不透明度，然后在 3 秒后不透明度再次为0，依此类推...
Why, and how to show/hide one by one after the previous one has shown and then hidden (opacity from 0 to 100 and then 0 again).为什么，以及如何在前一个显示然后隐藏之后显示/隐藏（不透明度从 0 到 100，然后再次为 0）。
Maybe this could not be a good way to do what I want.也许这不是做我想做的事的好方法。 Any other suggestion are welcome.欢迎任何其他建议。 Thanks in advance.提前致谢。
1 个解决方案
解决方案1
1 已采纳 2021-02-23 13:06:38
I'm not sure if my suggestion would help, but have you tried with other SVG attributes like begin (read more about it here )?我不确定我的建议是否会有所帮助，但是您是否尝试过使用其他 SVG 属性，例如begin （ 在此处阅读更多信息）？ I've worked with SVG in the past but it seems like your SVG animation is a bit more complicated, so I'm not sure if you can achieve what you want purely with SVG (but probably the answer is yes). I've worked with SVG in the past but it seems like your SVG animation is a bit more complicated, so I'm not sure if you can achieve what you want purely with SVG (but probably the answer is yes). There are many other SVG attributes.还有许多其他 SVG 属性。 Check them out. 去看一下。
I also thought answers to this question might help you.我还认为这个问题的答案可能会对您有所帮助。 I know that the question was different (or at least not exactly the same), but ignore the question.我知道问题不同（或至少不完全相同），但忽略这个问题。 Look at the attributes that people suggested in their answers.查看人们在答案中建议的属性。 You might get some fresh ideas how to solve your problem.你可能会得到一些新的想法来解决你的问题。 Hope this will help you at least a little bit.希望这至少对您有所帮助。
EDIT: THE SOLUTION编辑：解决方案
You need to put -webkit-animation BEFORE -webkit-animation-delay in order to get animation delay work.您需要在-webkit-animation-delay之前放置-webkit-animation以获得 animation 延迟工作。 If you change this order for example in your CSS for title-consulenze-ambientali and for title-sanzioni-ambientali , you'll see that now the delay starts to work.例如，如果您在 CSS 中为title-consulenze-ambientali和title-sanzioni-ambientali更改此顺序，您会看到现在延迟开始起作用。 You can see that only "CONSULENZE e PARERI AMBIENTALI" appears first and not both at the same time - but only for the first time after you refresh the snippet!您可以看到只有“CONSULENZE e PARERI AMBIENTALI”首先出现，而不是同时出现 -但仅在您刷新代码段后第一次出现！
See these two snippets bellow and pay attention to the headings.请参阅下面的这两个片段并注意标题。 I simplified your code (only these two headings, nothing else) so that you can easily follow what I'm talking about.我简化了你的代码（只有这两个标题，没有别的），这样你就可以轻松地理解我在说什么。
YOUR CODE: Both headings appear at the same time.您的代码：两个标题同时出现。
.badgeconsul h3 { font-weight: bold; position: absolute; margin: auto; width: 100%; top: 0; } /* animazione paths icone servizi home */ @keyframes opacitypathicon { 0% { opacity: 0 } 25% { opacity: 0.75 } 50% { opacity: 1 } 75% { opacity: 0.75 } 100% { opacity: 0 } } /* elementi icone da animare */ #consulenze-ambientali, #title-consulenze-ambientali { opacity: 0; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation: opacitypathicon 3s linear infinite; -moz-animation: opacitypathicon 3s linear infinite; -ms-animation: opacitypathicon 3s linear infinite; -o-animation: opacitypathicon 3s linear infinite; animation: opacitypathicon 3s linear infinite; } #sanzioni-ambientali, #title-sanzioni-ambientali { opacity: 0; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -ms-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; -webkit-animation: opacitypathicon 3s linear infinite; -moz-animation: opacitypathicon 3s linear infinite; -ms-animation: opacitypathicon 3s linear infinite; -o-animation: opacitypathicon 3s linear infinite; animation: opacitypathicon 3s linear infinite; }
<div class="badgeconsul"> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" version="1.1"> <h3 id="title-consulenze-ambientali" class="section-subtitle text-center"> CONSULENZE e PARERI AMBIENTALI </h3> <h3 id="title-sanzioni-ambientali" class="section-subtitle text-center"> RICORSI PER SANZIONI AMBIENTALI </h3> </div>
NOW, CHANGE THE ORDER ( -webkit-animation BEFORE -webkit-animation-delay ): Now the delay starts to work.现在，更改顺序（ -webkit-animation BEFORE -webkit-animation-delay ）：现在延迟开始起作用。 You can see that only "CONSULENZE e PARERI AMBIENTALI" appears first and not both at the same time - but only for the first time after you refresh the snippet!您可以看到只有“CONSULENZE e PARERI AMBIENTALI”首先出现，而不是同时出现 -但仅在您刷新代码段后第一次出现！
.badgeconsul h3 { font-weight: bold; position: absolute; margin: auto; width: 100%; top: 0; } /* animazione paths icone servizi home */ @keyframes opacitypathicon { 0% { opacity: 0 } 25% { opacity: 0.75 } 50% { opacity: 1 } 75% { opacity: 0.75 } 100% { opacity: 0 } } /* elementi icone da animare */ #consulenze-ambientali, #title-consulenze-ambientali { opacity: 0; -webkit-animation: opacitypathicon 3s linear infinite; -moz-animation: opacitypathicon 3s linear infinite; -ms-animation: opacitypathicon 3s linear infinite; -o-animation: opacitypathicon 3s linear infinite; animation: opacitypathicon 3s linear infinite; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; } #sanzioni-ambientali, #title-sanzioni-ambientali { opacity: 0; -webkit-animation: opacitypathicon 3s linear infinite; -moz-animation: opacitypathicon 3s linear infinite; -ms-animation: opacitypathicon 3s linear infinite; -o-animation: opacitypathicon 3s linear infinite; animation: opacitypathicon 3s linear infinite; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -ms-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; }
<div class="badgeconsul"> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" version="1.1"> <h3 id="title-consulenze-ambientali" class="section-subtitle text-center"> CONSULENZE e PARERI AMBIENTALI </h3> <h3 id="title-sanzioni-ambientali" class="section-subtitle text-center"> RICORSI PER SANZIONI AMBIENTALI </h3> </div>
But... You want these two headings to show in an alternating way, right?但是...您希望这两个标题以交替的方式显示，对吗？ The solution is that you make two different(.) animations (ie opacitypathicon1 and opacitypathicon2 ).解决方案是制作两个不同的(.) 动画（即opacitypathicon1和opacitypathicon2 ）。 These two animations now has duration set to 6s not 3s .这两个动画现在的持续时间设置为6s而不是3s 。 Why?为什么？ The first 3s you animate title-consulenze-ambientali (the opacity: 0 for title-sanzioni-ambientali during the first 3s ) and in the next 3s you animate title-sanzioni-ambientali (the opacity: 0 for title-consulenze-ambientali during the next 3s ).前3s为title-consulenze-ambientali设置动画（ opacity: 0 3s title-sanzioni-ambientali在接下来的3s中，您title-sanzioni-ambientali设置动画（ opacity: 0在title-consulenze-ambientali期间为 0接下来的3s ）。 All together it's 6s .加起来就是6s 。 Of course, you need to adjust the @keyframes (25% now represent 12.5%) to achieve the same animation as with your original code.当然，您需要调整@keyframes （25% 现在代表 12.5%）以实现与原始代码相同的 animation。 Take a look at the last (and correct) snippet.看看最后一个（也是正确的）片段。
CORRECT CODE:正确代码：
.badgeconsul h3 { font-weight: bold; position: absolute; margin: auto; width: 100%; top: 0; } /* animazione paths icone servizi home */ @keyframes opacitypathicon1 { 0% { opacity: 0 } 12.5% { opacity: 0.75 } 25% { opacity: 1 } 37.5% { opacity: 0.75 } 50% { opacity: 0 } 100% { opacity: 0 } } /* elementi icone da animare */ #consulenze-ambientali, #title-consulenze-ambientali { opacity: 0; -webkit-animation: opacitypathicon1 6s linear infinite; -moz-animation: opacitypathicon1 6s linear infinite; -ms-animation: opacitypathicon1 6s linear infinite; -o-animation: opacitypathicon1 6s linear infinite; animation: opacitypathicon1 6s linear infinite; } /* animazione paths icone servizi home */ @keyframes opacitypathicon2 { 0% { opacity: 0 } 50% { opacity: 0 } 62.5% { opacity: 0.75 } 75% { opacity: 1 } 87.5% { opacity: 0.75 } 100% { opacity: 0 } } #sanzioni-ambientali, #title-sanzioni-ambientali { opacity: 0; -webkit-animation: opacitypathicon2 6s linear infinite; -moz-animation: opacitypathicon2 6s linear infinite; -ms-animation: opacitypathicon2 6s linear infinite; -o-animation: opacitypathicon2 6s linear infinite; animation: opacitypathicon2 6s linear infinite; }
<div class="badgeconsul"> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" version="1.1"> <h3 id="title-consulenze-ambientali" class="section-subtitle text-center"> CONSULENZE e PARERI AMBIENTALI </h3> <h3 id="title-sanzioni-ambientali" class="section-subtitle text-center"> RICORSI PER SANZIONI AMBIENTALI </h3> </div>
I had spent a few hours to find the solution and to write all this (including several snippets), so you can understand what is happening.我花了几个小时来找到解决方案并编写所有这些（包括几个片段），以便您了解正在发生的事情。 Hope this helps.希望这可以帮助。 Try to do the same with other parts of your code.尝试对代码的其他部分执行相同的操作。 Have a nice day.祝你今天过得愉快。 :) :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
具有关键帧的CSS3动画 - CSS3 animations with keyframes
多个关键帧动画 - Multiple keyframes animations
使用 CSS 关键帧循环“波浪”动画 - Circles "waves" animations with CSS keyframes
SVG 多路径和<g> CSS 操作的标签</g> - SVG multiple paths and <g> tags for CSS manipulation
在不使用CSS的情况下为SVG中的多个路径设置动画 - animate multiple paths in svg without using css
访问 css 关键帧动画中的 html 属性 - Accessing html attributes in css keyframes animations
如何使用css关键帧同步两个动画？ - How to sync two animations using css keyframes?
如何使用CSS动画滚动关键帧 - How to use CSS animations to scroll through keyframes
使用 java 脚本链接多个 svg css 动画 - linking multiple svg css animations using java script
CSS SVG动画无法在边缘运行 - CSS SVG animations are not working in edge
相关标签