Using linear-gradient in an animation on CSS - html

Question

I'm working on a mobile first project, it's a project on with HTML and CSS only, allowing us to learn how to do animation with CSS only. I have a problem with my project that I hope you can help me with.
I am trying to fill the hearts with a linear-gradient color instead of the ##9356DC I am using in my code. Problem is, each time I am using the linear-gradient, the heart doesn't fill with any color anymore.
Thanks in advance for all the help you can provide to me!
.icon {
fill: transparent;
stroke: black;
stroke-width: 50;
cursor: pointer;
position: absolute;
right: 1.5rem;
bottom: 2rem;
}
.icon svg {
overflow: visible;
width: 1.6rem;
}
.icon .heart-main:active path {
animation: fill-animation 1.5s ease-in-out forwards;
stroke: #9356DC;
}
#keyframes fill-animation {
10% {
fill: #9356DC;
}
80% {
fill: #9356DC;
}
100% {
fill: #9356DC;
}
}
<div class="icon">
<svg class="heart-main" viewBox="0 0 512 512" width="100" title="heart">
<path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
</svg>
</div>

Answer 1

To fill linear-gradient, you will have to add linearGradient node inside the definitions section of your SVG file like below: (Read More about Linear Gradient)
<defs>
<linearGradient id="FillGradient" gradientTransform="rotate(90)">
<stop offset="2%" stop-color="#FFF" />
<stop offset="95%" stop-color="#9356DC" />
</linearGradient>
</defs>
Make sure you are adding id attribute which is going to be used in CSS to fill the gradient like below:
#keyframes fill-animation {
0%{
fill-opacity: 0.1;
}
10% {
fill: url(#FillGradient);
fill-opacity: 0.1;
}
80% {
fill: url(#FillGradient);
fill-opacity: 1;
}
100% {
fill: url(#FillGradient);
fill-opacity: 1;
}
}
You can remove the fill-opacity and of course change the color of gradient in linearGradient node as per your need.
See the working Snippet below: (I have commented few styles just to make it big and clear)
.icon {
fill: transparent;
stroke: black;
stroke-width: 50;
cursor: pointer;
/* position: absolute;
right: 1.5rem;
bottom: 2rem;*/
}
.icon svg {
overflow: visible;
width: 5.6rem; /* changed from 1.6 to 5.6 */
}
.icon .heart-main:active path {
animation: fill-animation 1.5s ease-in-out forwards;
stroke: #9356DC;
}
#keyframes fill-animation {
0%{
fill-opacity: 0.1;
}
10% {
fill: url(#FillGradient);
fill-opacity: 0.1;
}
80% {
fill: url(#FillGradient);
fill-opacity: 1;
}
100% {
fill: url(#FillGradient);
fill-opacity: 1;
}
}
<div class="icon">
<svg class="heart-main" viewBox="0 0 512 512" width="300" title="heart">
<path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
<defs>
<linearGradient id="FillGradient" gradientTransform="rotate(90)">
<stop offset="2%" stop-color="#FFF" />
<stop offset="98%" stop-color="#9356DC" />
</linearGradient>
</defs>
</svg>
</div>

Answer 2

you could use my code
#keyframes value {
0%{background-image: linear-gradient(90deg, red, purple, green);}
25%{background-image: linear-gradient(90deg, orange, yellow,blue);}
50%{background-image: linear-gradient(90deg, black, grey, white);}
100%{background-image: linear-gradient(90deg,lime,violet,magenta);}
}
then use
.icon{
animation-name: value;
animation-duration: 50s;
animation-iteration-count: infinite;
}
you could use background-image instead of fill and if that doesn't work you could use color instead.
i hope i helped but i am pretty new to css myself.