After encountering a strange issue not too long ago, I decided to continue my CSS animation experiments with SVG, specifically focusing on colorization.
Initially, I thought that applying the animation rules directly to the <g> tag grouping all the <path> elements would work automatically. However, that was wishful thinking...
Realizing that I needed to define the rules directly on each individual <path>, I began playing around with timing. My goal was to create an animation where the first shape starts with one color and then fades into the starting color of the second shape. The second shape would end with the color of the first shape, creating a back-and-forth effect.
Here's what I tried:
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.354... etc.However, my attempts failed as the transitions did not appear as smooth as intended. Can anyone provide some assistance?
Note: If necessary, please provide a brief explanation as this SVG excerpt is just a snippet of a larger project involving more shapes that need to undergo similar timed transitions.