css fill animation does not work on IE

Question

I have a simple question. Why the animation of the "fill" property does not work on IE ?

You can check out this fiddle : https://jsfiddle.net/g1n99644/2/

html :

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 44.4 29.8" style="enable-background:new 0 0 44.4 29.8;" xml:space="preserve">

    <path class="st1" d="M38.7,15.6H4.5c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h34.2c0.8,0,1.5,0.7,1.5,1.5S39.5,15.6,38.7,15.6z"/>

</svg>

Css :

.st1{
    -ms-animation: filling 2s ease both;
    animation: filling 2s ease both;
}

@keyframes filling{
    0%{ fill: #ffffff; }
    100%{ fill: #000000; }
}

@-ms-keyframes filling{
    0%{ fill: #ffffff; }
    100%{ fill: #000000; }
}

Thanks