Анимация SVG заливка туда-сюда

Question

После нечетной проблемы У меня было несколько минут назад, я продолжал свои эксперименты по CSS-анимации с SVG, но теперь, что касается раскрашивания.

Моя первоначальная идея состояла в том, чтобы применять правила анимации непосредственно над тегом <g>, группирующим все <path>, надеясь, что он будет работать "автоматически". Да, верно ...

Убедившись, что мне действительно нужно определить правила непосредственно над <path> внутри, я подумал, что мне придется поиграть с таймингами, поэтому первая фигура будет начинаться с цвета и исчезать до начального цвета. второй. Тогда вторая фигура оканчивается цветом первой фигуры, имитируя эффект «туда-сюда».

Здесь:

body,
html {
  height: 100%;
}

main {
  flex: 1 1 auto;
}

.box {
  max-height: 600px;
  max-width: 600px;
  padding: 10px;
}

svg {
  height: 100%;
  width: 100%;
}

svg path {
  fill: #0f68e0;
}

.left {
  transform-origin: 190px 555px;
  animation: spin-reverse 4000ms linear infinite;
    animation-delay: 0.8s;
}

  .left path {
    animation: colorize-left 6s linear infinite;
    animation-delay: 4s;
  }

.right {
  transform-origin: 605px 555px;
  animation: spin-reverse 4000ms linear infinite;
  animation-delay: 0.8s;
}

  .right path {
    animation: colorize-right 8s linear infinite;
    animation-delay: 6s;
  }

@keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  100% {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes colorize-left {
  0% {
    fill: #0f68e0;
  }

  100% {
    fill: #1998ea;
  }
}

@keyframes colorize-right {
  0% {
    fill: #1998ea;
  }

  100% {
    fill: #0f68e0;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<wrapper class="d-flex flex-column h-100">

  <main class="container-fluid d-flex align-items-center justify-content-center">

    <div class="row">

      <div class="col-md-12">

        <div class="logo">

          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-20 0 841.209 765.469" enable-background="new -20 0 840.209 765.469" xml:space="preserve">

            <g id="shapes">

              <circle id="left" cx="190" cy="555" r="225" fill="transparent" />

              <g class="left">

                <path fill-rule="evenodd" clip-rule="evenodd" d="M0,485.11c1.139-5.168,2.036-10.402,3.458-15.492
                                                                 c6.393-22.867,20.793-39.549,40.947-51.354c34.3-20.092,68.711-39.997,103.208-59.748c31.154-17.838,62.052-16.47,92.784,1.582
                                                                 c32.845,19.292,65.925,38.18,98.85,57.336c30.349,17.658,45.821,44.029,45.862,79.242c0.045,39.324,0.059,78.648-0.007,117.973
                                                                 c-0.058,34.592-15.114,60.828-44.834,78.314c-34.405,20.244-68.957,40.246-103.655,59.984c-28.94,16.463-58.437,16.797-87.462,0.377
                                                                 c-35.178-19.898-70.117-40.229-104.953-60.723c-24.501-14.416-39.667-35.475-43.343-64.141c-0.102-0.797-0.561-1.547-0.854-2.318
                                                                 C0,579.131,0,532.122,0,485.11z M70.932,555.338c0,22.164,0.074,44.326-0.081,66.488c-0.023,3.285,1.021,4.994,3.865,6.617
                                                                 c38.42,21.941,76.777,43.994,115.087,66.127c2.745,1.584,4.771,1.902,7.687,0.215c38.438-22.244,76.941-44.373,115.497-66.414
                                                                 c2.797-1.598,3.944-3.25,3.935-6.578c-0.124-44.158-0.115-88.316-0.016-132.475c0.007-3.215-0.884-5.018-3.791-6.678
                                                                 c-38.713-22.1-77.351-44.33-115.946-66.633c-2.487-1.436-4.269-1.418-6.729,0.002c-38.602,22.289-77.237,44.523-115.957,66.609
                                                                 c-2.979,1.699-3.626,3.627-3.611,6.732C70.982,511.346,70.931,533.342,70.932,555.338z"/>

              </g>

              <circle id="right" cx="605" cy="555" r="225" fill="transparent" />

              <g class="right">

                <path fill-rule="evenodd" clip-rule="evenodd" d="M796.181,555.313c0,19.5-0.115,39.002,0.025,58.502
                                                                 c0.257,35.969-15.705,62.445-46.587,80.311c-32.976,19.076-66.024,38.029-98.902,57.271c-31.076,18.188-62.064,18.539-93.234,0.455
                                                                 c-34.249-19.869-68.659-39.469-102.706-59.682c-28.814-17.105-43.453-42.863-43.624-76.43c-0.204-40-0.16-80.002-0.018-120
                                                                 c0.12-33.539,14.444-59.504,43.257-76.639c35.46-21.092,71.12-41.875,107.151-61.972c30.308-16.905,60.521-14.384,90.129,3.015
                                                                 c32.843,19.302,65.971,38.121,98.863,57.341c30.086,17.58,45.712,43.691,45.651,78.824
                                                                 C796.153,515.977,796.181,535.645,796.181,555.313z M728.073,555.583c0-21.832-0.099-43.664,0.093-65.496
                                                                 c0.034-3.813-1.063-5.908-4.44-7.838c-38.433-21.934-76.784-44.014-115.077-66.191c-2.938-1.701-5.012-1.23-7.662,0.297
                                                                 c-38.331,22.109-76.691,44.166-115.103,66.137c-2.759,1.58-3.927,3.246-3.917,6.592c0.133,44.33,0.119,88.662,0.021,132.992
                                                                 c-0.006,3.07,0.991,4.709,3.654,6.23c38.277,21.873,76.521,43.805,114.649,65.934c3.568,2.072,6.048,1.928,9.46-0.047
                                                                 c38.011-22.002,76.078-43.906,114.229-65.664c3.254-1.855,4.196-3.883,4.171-7.447C727.994,599.249,728.073,577.417,728.073,555.583
                                                                 z"/>

              </g>

            </g>

          </svg>

        </div>

      </div>

    </div>

  </main>

</wrapper>

Но я, очевидно, потерпел неудачу, поскольку переходы не являются плавными, как предполагалось. Может ли кто-нибудь помочь мне здесь?

Примечание: если необходимо, было бы неплохо небольшое объяснение, потому что этот SVG - просто фрагмент реальной вещи, то есть больше фигур будет участвовать в этом временном переходе

Answer 1

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

Идея избежать этого - сделать анимацию alternate. Вам также нужно сделать обе анимации одинаковой продолжительности и добавить задержку только для одного элемента.

body,
html {
  height: 100%;
}

main {
  flex: 1 1 auto;
}

.box {
  max-height: 600px;
  max-width: 600px;
  padding: 10px;
}

svg {
  height: 100%;
  width: 100%;
}

svg path {
  fill: #0f68e0;
}

.left {
  transform-origin: 190px 555px;
  animation: spin-reverse 4000ms linear infinite;
    animation-delay: 0.8s;
}

  .left path {
    animation: colorize-left 4s linear infinite alternate;
  }

.right {
  transform-origin: 605px 555px;
  animation: spin-reverse 4000ms linear infinite;
  animation-delay: 0.8s;
}

  .right path {
    animation: colorize-right 4s linear infinite alternate;
    animation-delay: 2s;
  }

@keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  100% {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes colorize-left {
  0% {
    fill: #0f68e0;
  }

  100% {
    fill: #1998ea;
  }
}

@keyframes colorize-right {
  0% {
    fill: #1998ea;
  }

  100% {
    fill: #0f68e0;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<wrapper class="d-flex flex-column h-100">

  <main class="container-fluid d-flex align-items-center justify-content-center">

    <div class="row">

      <div class="col-md-12">

        <div class="logo">

          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-20 0 841.209 765.469" enable-background="new -20 0 840.209 765.469" xml:space="preserve">

            <g id="shapes">

              <circle id="left" cx="190" cy="555" r="225" fill="transparent" />

              <g class="left">

                <path fill-rule="evenodd" clip-rule="evenodd" d="M0,485.11c1.139-5.168,2.036-10.402,3.458-15.492
                                                                 c6.393-22.867,20.793-39.549,40.947-51.354c34.3-20.092,68.711-39.997,103.208-59.748c31.154-17.838,62.052-16.47,92.784,1.582
                                                                 c32.845,19.292,65.925,38.18,98.85,57.336c30.349,17.658,45.821,44.029,45.862,79.242c0.045,39.324,0.059,78.648-0.007,117.973
                                                                 c-0.058,34.592-15.114,60.828-44.834,78.314c-34.405,20.244-68.957,40.246-103.655,59.984c-28.94,16.463-58.437,16.797-87.462,0.377
                                                                 c-35.178-19.898-70.117-40.229-104.953-60.723c-24.501-14.416-39.667-35.475-43.343-64.141c-0.102-0.797-0.561-1.547-0.854-2.318
                                                                 C0,579.131,0,532.122,0,485.11z M70.932,555.338c0,22.164,0.074,44.326-0.081,66.488c-0.023,3.285,1.021,4.994,3.865,6.617
                                                                 c38.42,21.941,76.777,43.994,115.087,66.127c2.745,1.584,4.771,1.902,7.687,0.215c38.438-22.244,76.941-44.373,115.497-66.414
                                                                 c2.797-1.598,3.944-3.25,3.935-6.578c-0.124-44.158-0.115-88.316-0.016-132.475c0.007-3.215-0.884-5.018-3.791-6.678
                                                                 c-38.713-22.1-77.351-44.33-115.946-66.633c-2.487-1.436-4.269-1.418-6.729,0.002c-38.602,22.289-77.237,44.523-115.957,66.609
                                                                 c-2.979,1.699-3.626,3.627-3.611,6.732C70.982,511.346,70.931,533.342,70.932,555.338z"/>

              </g>

              <circle id="right" cx="605" cy="555" r="225" fill="transparent" />

              <g class="right">

                <path fill-rule="evenodd" clip-rule="evenodd" d="M796.181,555.313c0,19.5-0.115,39.002,0.025,58.502
                                                                 c0.257,35.969-15.705,62.445-46.587,80.311c-32.976,19.076-66.024,38.029-98.902,57.271c-31.076,18.188-62.064,18.539-93.234,0.455
                                                                 c-34.249-19.869-68.659-39.469-102.706-59.682c-28.814-17.105-43.453-42.863-43.624-76.43c-0.204-40-0.16-80.002-0.018-120
                                                                 c0.12-33.539,14.444-59.504,43.257-76.639c35.46-21.092,71.12-41.875,107.151-61.972c30.308-16.905,60.521-14.384,90.129,3.015
                                                                 c32.843,19.302,65.971,38.121,98.863,57.341c30.086,17.58,45.712,43.691,45.651,78.824
                                                                 C796.153,515.977,796.181,535.645,796.181,555.313z M728.073,555.583c0-21.832-0.099-43.664,0.093-65.496
                                                                 c0.034-3.813-1.063-5.908-4.44-7.838c-38.433-21.934-76.784-44.014-115.077-66.191c-2.938-1.701-5.012-1.23-7.662,0.297
                                                                 c-38.331,22.109-76.691,44.166-115.103,66.137c-2.759,1.58-3.927,3.246-3.917,6.592c0.133,44.33,0.119,88.662,0.021,132.992
                                                                 c-0.006,3.07,0.991,4.709,3.654,6.23c38.277,21.873,76.521,43.805,114.649,65.934c3.568,2.072,6.048,1.928,9.46-0.047
                                                                 c38.011-22.002,76.078-43.906,114.229-65.664c3.254-1.855,4.196-3.883,4.171-7.447C727.994,599.249,728.073,577.417,728.073,555.583
                                                                 z"/>

              </g>

            </g>

          </svg>

        </div>

      </div>

    </div>

  </main>

</wrapper>