инвертировать продолжительность анимации при четных вызовах анимации в css3 - PullRequest
Новая
       46

инвертировать продолжительность анимации при четных вызовах анимации в css3

0 голосов
/ 04 августа 2020

У меня есть следующий фрагмент для анимации Wi-Fi, которую я создал с помощью svgs. 

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, который я могу использовать для выполнения sh этого?

РЕДАКТИРОВАТЬ 1: -

Итак, в основном 1-й цикл анимации будет выглядеть так:

enter image description here

enter image description here

enter image description here

введите описание изображения здесь

А затем на 2-м цикле анимации анимация будет инвертирована. Надеюсь, это даст больше ясности.

1 Ответ

1 голос
/ 05 августа 2020

Вместо того, чтобы комбинировать анимации, сделайте одну более длинную анимацию. Обратите внимание, как он переходит от красного к белому намного быстрее, чем от белого к красному. 

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>
...