css - CSS キュービックベジエは、IE11 と Edge と Chrome で動作が異なります。

Question

次の CSS ルールがあります。

div {
    width:10%; background:black;
    transition: width 2s cubic-bezier(.15,.88,0,.99);
    -o-transition: width 2s cubic-bezier(.15,.88,0,.99);
    -ms-transition: width 2s cubic-bezier(.15,.88,0,.99);
    -moz-transition: width 2s cubic-bezier(.15,.88,0,.99);
    -webkit-transition: width 2s cubic-bezier(.15,.88,0,.99);
}
div:hover {
    width:100%;
}

Chrome、IE、Edge の両方で div の上にマウスを置くと、幅が 10% から 100% に変化します。

Chrome で div にマウスを合わせると、アニメーションの速度が速くなり、遅くなります。マウスアウトすると、アニメーションの速度が速くなり、遅くなります。

IE 11 または Edge で div にマウスを合わせると、アニメーションの速度が速くなり、遅くなります。マウスアウトすると、アニメーションの速度が遅くなり、速く終わります。

IE11 と Edge を Chrome と同じように動作させることはできますか? もしそうなら、どうすればいいですか？