在 CSS3 中偶次调用动画时反转动画持续时间
Invert animation-duration on even calls of animation in CSS3
我有以下使用 svgs 创建的 wifi 动画片段。
body {
background: #eee;
padding: 0;
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wifi-stroke1, .wifi-stroke2, .wifi-stroke3, .wifi-dot {
animation-name: wifiStroke;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-delay: 1s;
animation-direction: alternate;
}
.wifi-stroke1 {
animation-duration: 4s;
}
.wifi-stroke2 {
animation-duration: 3s;
}
.wifi-stroke3 {
animation-duration: 2s;
}
.wifi-dot {
animation-duration: 1s;
}
@keyframes wifiStroke {
0% {
fill: none;
}
100% {
fill: red;
}
}
<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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="34.710026mm"
height="23.747904mm"
viewBox="0 0 34.710026 23.747904"
version="1.1"
id="svg8"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
sodipodi:docname="wifi-icon.svg">
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-49.433157,-86.191637)">
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 256.99609,325.76367 c -24.79211,0 -48.46682,4.78761 -70.16211,13.47461 l 2.9629,4.17774 c 20.81469,-8.16849 43.48065,-12.65625 67.19921,-12.65625 20.4451,0 40.10693,3.33867 58.47657,9.49023 l 2.54882,-4.40234 c -19.14633,-6.53405 -39.67186,-10.08399 -61.02539,-10.08399 z"
transform="scale(0.26458333)"
id="path907"
inkscape:connector-curvature="0"
class="wifi-stroke1"
/>
<path
style="color:#fff;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-stretch:normal;
font-size:medium;line-height:normal;
font-family:sans-serif;
font-variant-ligatures:normal;
font-variant-position:normal;
font-variant-caps:normal;
font-variant-numeric:normal;
font-variant-alternates:normal;
font-feature-settings:normal;
text-indent:0;
text-align:start;
text-decoration:none;
text-decoration-line:none;
text-decoration-style:solid;
text-decoration-color:#000000;
letter-spacing:normal;
word-spacing:normal;
text-transform:none;
writing-mode:lr-tb;
direction:ltr;
text-orientation:mixed;
dominant-baseline:auto;
baseline-shift:baseline;
text-anchor:start;
white-space:normal;
shape-padding:0;
clip-rule:nonzero;
display:inline;
overflow:visible;
visibility:visible;
opacity:0.23699999;
isolation:auto;
mix-blend-mode:normal;
color-interpolation:sRGB;
color-interpolation-filters:linearRGB;
solid-color:#000000;
solid-opacity:1;
vector-effect:none;
fill:#fff;
fill-opacity:1;
fill-rule:nonzero;
stroke:none;
stroke-width:5;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-dashoffset:0;
stroke-opacity:1;
color-rendering:auto;
image-rendering:auto;
shape-rendering:auto;
text-rendering:auto;
enable-background:accumulate"
d="m 256.99609,353.70312 c -18.73287,0 -36.71513,3.21443 -53.43945,9.10157 l 3,4.22851 c 15.82057,-5.39874 32.78565,-8.33203 50.43945,-8.33203 15.3284,0 30.13464,2.21824 44.12696,6.33399 l 2.57031,-4.43946 c -14.7823,-4.47607 -30.45773,-6.89257 -46.69727,-6.89258 z"
transform="scale(0.26458333)"
id="path905"
inkscape:connector-curvature="0"
class='wifi-stroke2'
/>
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 256.99609,381.67383 c -12.64004,-1e-5 -24.86902,1.76559 -36.45507,5.0625 l 3.07617,4.33398 c 10.64179,-2.86362 21.82928,-4.40039 33.3789,-4.40039 10.19282,0 20.10394,1.19558 29.60743,3.44336 l 2.60546,-4.5 c -10.31619,-2.56799 -21.10483,-3.93945 -32.21289,-3.93945 z"
transform="scale(0.26458333)"
id="path903"
inkscape:connector-curvature="0"
class="wifi-stroke3"
/>
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 257,407.51953 a 3.9999997,3.9999997 0 0 0 -4,4 3.9999997,3.9999997 0 0 0 4,4 3.9999997,3.9999997 0 0 0 4,-4 3.9999997,3.9999997 0 0 0 -4,-4 z"
transform="scale(0.26458333)"
id="path878"
inkscape:connector-curvature="0"
class="wifi-dot"
/>
</g>
</svg>
第 1 次迭代工作正常，但在第 2 次迭代时我想让动画反转延迟并执行，现在我知道 animation-direction:alternate，但这似乎不适合我的使用在我没有移动方向的情况下，我需要 animation-duration 在动画的偶数调用中反转并在奇数调用中恢复到原始 animation-duration 。我可以使用 CSS 技巧来完成此操作吗？
编辑
所以基本上第一个动画周期是这样的：
然后在动画的第 2 个循环中，动画将反转。
与其合并动画，不如制作一个更长的动画。请注意它如何从红色变为白色比从白色变为红色快得多。
body {
background: #eee;
padding: 0;
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wifi-stroke1,
.wifi-stroke2,
.wifi-stroke3,
.wifi-dot {
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
.wifi-stroke1 {
animation-name: wifiStroke1;
}
.wifi-stroke2 {
animation-name: wifiStroke2;
}
.wifi-stroke3 {
animation-name: wifiStroke3;
}
.wifi-dot {
animation-name: wifiDot;
}
@keyframes wifiStroke1 {
/*
Start white, wait for all other bars to fill,
then become red for the shortest possible time
*/
50% {
fill: white;
}
66.667% {
fill: red;
}
75% {
fill: white;
}
}
@keyframes wifiStroke2 {
/*
Start white, wait for the two bars below this to fill
then become red a little while longer
*/
33.333% {
fill: white;
}
50% {
fill: red;
}
75% {
fill: red;
}
80% {
fill: white;
}
}
@keyframes wifiStroke3 {
25% {
fill: white;
}
33.333% {
fill: red;
}
80% {
fill: red;
}
85% {
fill: white;
}
}
@keyframes wifiDot {
16.667% {
fill: white;
}
25% {
fill: red;
}
85% {
fill: red;
}
90% {
fill: white;
}
}
<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" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="34.710026mm" height="23.747904mm" viewBox="0 0 34.710026 23.747904" version="1.1" id="svg8" inkscape:version="0.92.2 5c3e80d, 2017-08-06" sodipodi:docname="wifi-icon.svg">
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-49.433157,-86.191637)">
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 256.99609,325.76367 c -24.79211,0 -48.46682,4.78761 -70.16211,13.47461 l 2.9629,4.17774 c 20.81469,-8.16849 43.48065,-12.65625 67.19921,-12.65625 20.4451,0 40.10693,3.33867 58.47657,9.49023 l 2.54882,-4.40234 c -19.14633,-6.53405 -39.67186,-10.08399 -61.02539,-10.08399 z"
transform="scale(0.26458333)"
id="path907"
inkscape:connector-curvature="0"
class="wifi-stroke1"
/>
<path
style="color:#fff;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-stretch:normal;
font-size:medium;line-height:normal;
font-family:sans-serif;
font-variant-ligatures:normal;
font-variant-position:normal;
font-variant-caps:normal;
font-variant-numeric:normal;
font-variant-alternates:normal;
font-feature-settings:normal;
text-indent:0;
text-align:start;
text-decoration:none;
text-decoration-line:none;
text-decoration-style:solid;
text-decoration-color:#000000;
letter-spacing:normal;
word-spacing:normal;
text-transform:none;
writing-mode:lr-tb;
direction:ltr;
text-orientation:mixed;
dominant-baseline:auto;
baseline-shift:baseline;
text-anchor:start;
white-space:normal;
shape-padding:0;
clip-rule:nonzero;
display:inline;
overflow:visible;
visibility:visible;
opacity:0.23699999;
isolation:auto;
mix-blend-mode:normal;
color-interpolation:sRGB;
color-interpolation-filters:linearRGB;
solid-color:#000000;
solid-opacity:1;
vector-effect:none;
fill:#fff;
fill-opacity:1;
fill-rule:nonzero;
stroke:none;
stroke-width:5;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-dashoffset:0;
stroke-opacity:1;
color-rendering:auto;
image-rendering:auto;
shape-rendering:auto;
text-rendering:auto;
enable-background:accumulate"
d="m 256.99609,353.70312 c -18.73287,0 -36.71513,3.21443 -53.43945,9.10157 l 3,4.22851 c 15.82057,-5.39874 32.78565,-8.33203 50.43945,-8.33203 15.3284,0 30.13464,2.21824 44.12696,6.33399 l 2.57031,-4.43946 c -14.7823,-4.47607 -30.45773,-6.89257 -46.69727,-6.89258 z"
transform="scale(0.26458333)"
id="path905"
inkscape:connector-curvature="0"
class='wifi-stroke2'
/>
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 256.99609,381.67383 c -12.64004,-1e-5 -24.86902,1.76559 -36.45507,5.0625 l 3.07617,4.33398 c 10.64179,-2.86362 21.82928,-4.40039 33.3789,-4.40039 10.19282,0 20.10394,1.19558 29.60743,3.44336 l 2.60546,-4.5 c -10.31619,-2.56799 -21.10483,-3.93945 -32.21289,-3.93945 z"
transform="scale(0.26458333)"
id="path903"
inkscape:connector-curvature="0"
class="wifi-stroke3"
/>
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 257,407.51953 a 3.9999997,3.9999997 0 0 0 -4,4 3.9999997,3.9999997 0 0 0 4,4 3.9999997,3.9999997 0 0 0 4,-4 3.9999997,3.9999997 0 0 0 -4,-4 z"
transform="scale(0.26458333)"
id="path878"
inkscape:connector-curvature="0"
class="wifi-dot"
/>
</g>
</svg>
我有以下使用 svgs 创建的 wifi 动画片段。
body {
background: #eee;
padding: 0;
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wifi-stroke1, .wifi-stroke2, .wifi-stroke3, .wifi-dot {
animation-name: wifiStroke;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-delay: 1s;
animation-direction: alternate;
}
.wifi-stroke1 {
animation-duration: 4s;
}
.wifi-stroke2 {
animation-duration: 3s;
}
.wifi-stroke3 {
animation-duration: 2s;
}
.wifi-dot {
animation-duration: 1s;
}
@keyframes wifiStroke {
0% {
fill: none;
}
100% {
fill: red;
}
}
<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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="34.710026mm"
height="23.747904mm"
viewBox="0 0 34.710026 23.747904"
version="1.1"
id="svg8"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
sodipodi:docname="wifi-icon.svg">
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-49.433157,-86.191637)">
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 256.99609,325.76367 c -24.79211,0 -48.46682,4.78761 -70.16211,13.47461 l 2.9629,4.17774 c 20.81469,-8.16849 43.48065,-12.65625 67.19921,-12.65625 20.4451,0 40.10693,3.33867 58.47657,9.49023 l 2.54882,-4.40234 c -19.14633,-6.53405 -39.67186,-10.08399 -61.02539,-10.08399 z"
transform="scale(0.26458333)"
id="path907"
inkscape:connector-curvature="0"
class="wifi-stroke1"
/>
<path
style="color:#fff;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-stretch:normal;
font-size:medium;line-height:normal;
font-family:sans-serif;
font-variant-ligatures:normal;
font-variant-position:normal;
font-variant-caps:normal;
font-variant-numeric:normal;
font-variant-alternates:normal;
font-feature-settings:normal;
text-indent:0;
text-align:start;
text-decoration:none;
text-decoration-line:none;
text-decoration-style:solid;
text-decoration-color:#000000;
letter-spacing:normal;
word-spacing:normal;
text-transform:none;
writing-mode:lr-tb;
direction:ltr;
text-orientation:mixed;
dominant-baseline:auto;
baseline-shift:baseline;
text-anchor:start;
white-space:normal;
shape-padding:0;
clip-rule:nonzero;
display:inline;
overflow:visible;
visibility:visible;
opacity:0.23699999;
isolation:auto;
mix-blend-mode:normal;
color-interpolation:sRGB;
color-interpolation-filters:linearRGB;
solid-color:#000000;
solid-opacity:1;
vector-effect:none;
fill:#fff;
fill-opacity:1;
fill-rule:nonzero;
stroke:none;
stroke-width:5;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-dashoffset:0;
stroke-opacity:1;
color-rendering:auto;
image-rendering:auto;
shape-rendering:auto;
text-rendering:auto;
enable-background:accumulate"
d="m 256.99609,353.70312 c -18.73287,0 -36.71513,3.21443 -53.43945,9.10157 l 3,4.22851 c 15.82057,-5.39874 32.78565,-8.33203 50.43945,-8.33203 15.3284,0 30.13464,2.21824 44.12696,6.33399 l 2.57031,-4.43946 c -14.7823,-4.47607 -30.45773,-6.89257 -46.69727,-6.89258 z"
transform="scale(0.26458333)"
id="path905"
inkscape:connector-curvature="0"
class='wifi-stroke2'
/>
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 256.99609,381.67383 c -12.64004,-1e-5 -24.86902,1.76559 -36.45507,5.0625 l 3.07617,4.33398 c 10.64179,-2.86362 21.82928,-4.40039 33.3789,-4.40039 10.19282,0 20.10394,1.19558 29.60743,3.44336 l 2.60546,-4.5 c -10.31619,-2.56799 -21.10483,-3.93945 -32.21289,-3.93945 z"
transform="scale(0.26458333)"
id="path903"
inkscape:connector-curvature="0"
class="wifi-stroke3"
/>
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 257,407.51953 a 3.9999997,3.9999997 0 0 0 -4,4 3.9999997,3.9999997 0 0 0 4,4 3.9999997,3.9999997 0 0 0 4,-4 3.9999997,3.9999997 0 0 0 -4,-4 z"
transform="scale(0.26458333)"
id="path878"
inkscape:connector-curvature="0"
class="wifi-dot"
/>
</g>
</svg>
第 1 次迭代工作正常，但在第 2 次迭代时我想让动画反转延迟并执行，现在我知道 animation-direction:alternate，但这似乎不适合我的使用在我没有移动方向的情况下，我需要 animation-duration 在动画的偶数调用中反转并在奇数调用中恢复到原始 animation-duration 。我可以使用 CSS 技巧来完成此操作吗？
编辑
所以基本上第一个动画周期是这样的：
然后在动画的第 2 个循环中，动画将反转。
与其合并动画，不如制作一个更长的动画。请注意它如何从红色变为白色比从白色变为红色快得多。
body {
background: #eee;
padding: 0;
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.wifi-stroke1,
.wifi-stroke2,
.wifi-stroke3,
.wifi-dot {
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
.wifi-stroke1 {
animation-name: wifiStroke1;
}
.wifi-stroke2 {
animation-name: wifiStroke2;
}
.wifi-stroke3 {
animation-name: wifiStroke3;
}
.wifi-dot {
animation-name: wifiDot;
}
@keyframes wifiStroke1 {
/*
Start white, wait for all other bars to fill,
then become red for the shortest possible time
*/
50% {
fill: white;
}
66.667% {
fill: red;
}
75% {
fill: white;
}
}
@keyframes wifiStroke2 {
/*
Start white, wait for the two bars below this to fill
then become red a little while longer
*/
33.333% {
fill: white;
}
50% {
fill: red;
}
75% {
fill: red;
}
80% {
fill: white;
}
}
@keyframes wifiStroke3 {
25% {
fill: white;
}
33.333% {
fill: red;
}
80% {
fill: red;
}
85% {
fill: white;
}
}
@keyframes wifiDot {
16.667% {
fill: white;
}
25% {
fill: red;
}
85% {
fill: red;
}
90% {
fill: white;
}
}
<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" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="34.710026mm" height="23.747904mm" viewBox="0 0 34.710026 23.747904" version="1.1" id="svg8" inkscape:version="0.92.2 5c3e80d, 2017-08-06" sodipodi:docname="wifi-icon.svg">
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-49.433157,-86.191637)">
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 256.99609,325.76367 c -24.79211,0 -48.46682,4.78761 -70.16211,13.47461 l 2.9629,4.17774 c 20.81469,-8.16849 43.48065,-12.65625 67.19921,-12.65625 20.4451,0 40.10693,3.33867 58.47657,9.49023 l 2.54882,-4.40234 c -19.14633,-6.53405 -39.67186,-10.08399 -61.02539,-10.08399 z"
transform="scale(0.26458333)"
id="path907"
inkscape:connector-curvature="0"
class="wifi-stroke1"
/>
<path
style="color:#fff;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-stretch:normal;
font-size:medium;line-height:normal;
font-family:sans-serif;
font-variant-ligatures:normal;
font-variant-position:normal;
font-variant-caps:normal;
font-variant-numeric:normal;
font-variant-alternates:normal;
font-feature-settings:normal;
text-indent:0;
text-align:start;
text-decoration:none;
text-decoration-line:none;
text-decoration-style:solid;
text-decoration-color:#000000;
letter-spacing:normal;
word-spacing:normal;
text-transform:none;
writing-mode:lr-tb;
direction:ltr;
text-orientation:mixed;
dominant-baseline:auto;
baseline-shift:baseline;
text-anchor:start;
white-space:normal;
shape-padding:0;
clip-rule:nonzero;
display:inline;
overflow:visible;
visibility:visible;
opacity:0.23699999;
isolation:auto;
mix-blend-mode:normal;
color-interpolation:sRGB;
color-interpolation-filters:linearRGB;
solid-color:#000000;
solid-opacity:1;
vector-effect:none;
fill:#fff;
fill-opacity:1;
fill-rule:nonzero;
stroke:none;
stroke-width:5;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-dashoffset:0;
stroke-opacity:1;
color-rendering:auto;
image-rendering:auto;
shape-rendering:auto;
text-rendering:auto;
enable-background:accumulate"
d="m 256.99609,353.70312 c -18.73287,0 -36.71513,3.21443 -53.43945,9.10157 l 3,4.22851 c 15.82057,-5.39874 32.78565,-8.33203 50.43945,-8.33203 15.3284,0 30.13464,2.21824 44.12696,6.33399 l 2.57031,-4.43946 c -14.7823,-4.47607 -30.45773,-6.89257 -46.69727,-6.89258 z"
transform="scale(0.26458333)"
id="path905"
inkscape:connector-curvature="0"
class='wifi-stroke2'
/>
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 256.99609,381.67383 c -12.64004,-1e-5 -24.86902,1.76559 -36.45507,5.0625 l 3.07617,4.33398 c 10.64179,-2.86362 21.82928,-4.40039 33.3789,-4.40039 10.19282,0 20.10394,1.19558 29.60743,3.44336 l 2.60546,-4.5 c -10.31619,-2.56799 -21.10483,-3.93945 -32.21289,-3.93945 z"
transform="scale(0.26458333)"
id="path903"
inkscape:connector-curvature="0"
class="wifi-stroke3"
/>
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.23699999;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 257,407.51953 a 3.9999997,3.9999997 0 0 0 -4,4 3.9999997,3.9999997 0 0 0 4,4 3.9999997,3.9999997 0 0 0 4,-4 3.9999997,3.9999997 0 0 0 -4,-4 z"
transform="scale(0.26458333)"
id="path878"
inkscape:connector-curvature="0"
class="wifi-dot"
/>
</g>
</svg>