What is the difference between a grayscale CSS3 filter and a saturated one?

Question

I know that the range of shades of gray is from 0-1, of course, the opposite of the saturated range from 1-0, but besides this, they behave in a completely different way?

Edit

My question relates to the behavior of these filters in the range from 1 to 0. Do they use the same algorithm within themselves or is the manipulation somehow different? I do not ask for information to be simply quoted from MDN.

Edit 2

Just comparing them with my eyes, they look a little 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"/>

Run codeHide result

Answer 1

From MDN

Greyscale

. "amount" . 100% . 0% . 0% 100% . 'amount , 0.

. "amount" . 0% . 100% . . 100%, . " " , 1.

0-1 0 - ().

, , 0 - 1 ( 0% 100%), / , saturate 100% "" grayscale .

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

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

Hide result

EDITED , " ". , , , , , W3C spec

<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> 

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

, , .