Animate SVG fill back-and-forth - css

Question

After an odd issue I had a few moments ago, I kept on my CSS animations experiments with SVG, but now, regarding colourizing.
My initial idea was to apply the animation rules directly over the <g> tag grouping all <path>, hoping it would work "automagically". Yeah, right...
After convincing myself that I would really need to define the rules directly over the <path> inside, I thought I'd have to play around with timings, so the first shape would start with a colour and fades to the start colour of the second. Then the second shape would end with the colour of the first shape, simulating a back-and-forth effect.
Here:
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>
But I obviously failed as the transitions aren't smooth as intended. Could anyone help me out here?
Note: If needed, a small explanation would be nice because this SVG is just a fragment of the real thing, meaning more shapes will participate this timed transition

Answer 1

You are almost good, the issue is that the last state of the animation is different from the first and since you made the animation to be infinite you will have a jump.
An idea to avoid this is to make the animation alternate. You need to also make both animation with the same duration and add a delay to only one element.
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>