Using linear-gradient in an animation on CSS

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>