What's the difference between CSS3 filter grayscale and saturate?

Question

I am aware that grayscale's range from 0-1 is of course the opposite of saturate's range from 1-0, but other than that do they behave at all differently?

Edit

My question pertains to the behavior of these filters within the range of 1-0 specifically. Do they apply the same algorithm internally or is the manipulation somehow different? I'm not asking for information to simply be quoted from MDN.

Edit 2

Just comparing these with my eyes, they look slightly different but I can't be sure.

@keyframes fadegrayscale {
  from {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  }
  
  to {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
  }
}

@keyframes fadesaturate {
  from {
    -webkit-filter: saturate(1);
    filter: saturate(1);
  }
  
  to {
    -webkit-filter: saturate(0);
    filter: saturate(0);
  }
}

img.grayscale {
  animation: fadegrayscale 2s linear alternate infinite;
}

img.saturate {
  animation: fadesaturate 2s linear alternate infinite;
}

<img src="http://www.fillmurray.com/200/300" class="grayscale"/>
<img src="http://www.fillmurray.com/200/300" class="saturate"/>

Answer 1

From MDN

Greyscale

Converts the input image to grayscale. The value of ‘amount’ defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 0 is used.

Saturate

Saturates the input image. The value of ‘amount’ defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results. If the ‘amount’ parameter is missing, a value of 1 is used.

The range is not 0-1 it's 0 - infinity (effectively).

Yes, functionally, between 0 - 1 (or 0% and 100%) the two are effectively the reverse/inverse of each other but saturate can exceed 100% and add "color" where grayscale cannot.

img {
  -webkit-filter: saturate(300%);
  filter: saturate(300%);
}

<img src="http://www.fillmurray.com/200/300" />

As for EDITED question the answer is "not quite". The effects are managed through manipulation of a color matrix which, I confess, I am not fully to grips with but, per the W3C spec is

Grayscale

<filter id="grayscale">
  <feColorMatrix type="matrix"
             values="(0.2126 + 0.7874 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0
                     (0.2126 - 0.2126 * [1 - amount]) (0.7152 + 0.2848 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0
                     (0.2126 - 0.2126 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 + 0.9278 * [1 - amount]) 0 0
                     0 0 0 1 0"/>
</filter> 

Saturate

<filter id="saturate">
  <feColorMatrix type="saturate"
             values="(1 - [amount])"/>
</filter>

So it would appear that different calculations are being performed for each.