不久前的odd issue之后，我继续使用SVG进行CSS动画实验，但是现在是关于着色。
我最初的想法是将动画规则直接应用于对所有<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只是真实物体的一部分，这意味着更多的形状将参与此定时过渡
答案 0 :(得分：0)
您几乎不错，问题在于动画的最后一个状态不同于第一个状态，并且由于您将动画设置为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>