Animation from orange to teal is not taking effect - css

Question

I'd like to animate an .svg image with css, changing between two colors. I attempted a tutorial here and css-tricks with no success. I believe my issue (or one of them) might be that I'm not targeting the right element in the .svg. But I've tried many different elements, ids, tags, tried using different images, and even tried making my own image. I'll share the relevant code below using my first choice .svg file:
#keyframes color-change {
from {
fill: #f4f00;
}
to {
fill: #a4f4f4;
}
}
#Layer_1, #adobe_illustrator_pgf {
animation: color-change 4s infinite alternate linear;}
<svg version="1.1"
id="Layer_1"
xmlns:x="&ns_extend;"
xmlns:i="&ns_ai;"
xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox="0 0 750 750"
style="enable-background:new 0 0 750 750;"
xml:space="preserve">
<switch>
<foreignObject
requiredExtensions="&ns_ai;"
x="0"
y="0"
width="1"
height="1">
<i:pgfRef
xlink:href="#adobe_illustrator_pgf">
</i:pgfRef>
</foreignObject>
Thank you!
Update: I created the svg I wanted and was definitely able to target the right id-- I was able to change the color to orange. But the animation from orange to teal is still not taking effect.
svg:
#keyframes color-change {
from {
fill: var(--secondary-color);
}
to {
fill: var(--primary-color-lighter);
}
}
#about__main--img__fleur {
animation: color-change 4s infinite alternate linear;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 750 750" >
<path style="fill:#ff4f00" d="m 158.31488,-2.2022728 c 91.01571,130.5628628 43.85069,121.0522128 12.21,230.0500028 h 8.42 c 82.76816,-249.50584 171.87632,-54.87233 123.86,-12.24 -51.62689,-90.80719 -96.81,12.24 -96.81,12.24 14.30301,2.24628 34.92456,17.33855 -5.51,23.74 -5.67801,35.22547 14.97807,58.61711 40.68,19.78 21.9137,62.34493 -56.60711,108.84523 -64.69,-19.78 h -9.64 c -5.46371,42.41119 45.01408,82.24554 -8.45,115.11 -45.63648,-28.05726 -15.31394,-61.97543 -8.59,-115.11 h -10.45 c -11.44247,151.90592 -92.587302,60.58808 -64.690002,19.78 32.374092,54.98005 40.680002,-19.78 40.680002,-19.78 -34.128832,-6.82614 -22.687672,-19.12856 -5.51,-23.74 -43.888082,-101.86884 -96.816002,-12.24 -96.816002,-12.24 -48.014316,-52.93652 50.97435,-223.7694488 123.866002,12.24 h 9.23 c -11.49629,-82.82875 -92.252982,-101.39727 12.21,-230.0500028" id="about__main--img__fleur" sodipodi:nodetypes="ccccccccccccccccccc" />
</svg>

Answer 1

I removed from svg style =" fill: # ff4f00 " since this style has more weight than styles of the same element in CSS
Assigned an identifier for path - id =" Layer_1 "
The rest is done more or less correctly. Pretty good for your first try.
Color change animation occurs when hovering over a shape
#Layer_1 {
fill:#ff4f00;
}
#Layer_1:hover {
animation: color-change 2s infinite alternate linear;
}
#keyframes color-change {
from {
fill: #ff4f00;
}
to {
fill: #a4f4f4;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 750 750" >
<path id="Layer_1" d="m 158.31488,-2.2022728 c 91.01571,130.5628628 43.85069,121.0522128 12.21,230.0500028 h 8.42 c 82.76816,-249.50584 171.87632,-54.87233 123.86,-12.24 -51.62689,-90.80719 -96.81,12.24 -96.81,12.24 14.30301,2.24628 34.92456,17.33855 -5.51,23.74 -5.67801,35.22547 14.97807,58.61711 40.68,19.78 21.9137,62.34493 -56.60711,108.84523 -64.69,-19.78 h -9.64 c -5.46371,42.41119 45.01408,82.24554 -8.45,115.11 -45.63648,-28.05726 -15.31394,-61.97543 -8.59,-115.11 h -10.45 c -11.44247,151.90592 -92.587302,60.58808 -64.690002,19.78 32.374092,54.98005 40.680002,-19.78 40.680002,-19.78 -34.128832,-6.82614 -22.687672,-19.12856 -5.51,-23.74 -43.888082,-101.86884 -96.816002,-12.24 -96.816002,-12.24 -48.014316,-52.93652 50.97435,-223.7694488 123.866002,12.24 h 9.23 c -11.49629,-82.82875 -92.252982,-101.39727 12.21,-230.0500028" />
</svg>
UPDATE
I have optimized your SVG code using the SVGOMG utility. The file size has decreased several times.
This is to make the SVG take up less space on the HTML page.
The app is responsive. You can change its initial dimensions using the vw vh relative units in the parent container
.container {
width:50vw;
height:50vh;
}
#Layer_1 {
fill:#ff4f00;
}
#Layer_1:hover {
animation: color-change 2s infinite alternate linear;
}
#keyframes color-change {
from {
fill: #ff4f00;
}
to {
fill: #a4f4f4;
}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 750 750" >
<path id="Layer_1" d="M158-2c91 130 44 121 13 230h8c83-250 172-55 124-12-52-91-97 12-97 12 14 2 35 17-6 24-5 35 15 58 41 19 22 63-56 109-65-19h-9c-6 42 45 82-9 115-45-28-15-62-8-115h-11c-11 151-92 60-64 19 32 55 40-19 40-19-34-7-22-20-5-24-44-102-97-12-97-12-48-53 51-224 124 12h9c-11-83-92-102 12-230" />
</svg>
</div>