I have the following CSS rule:
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%;
}
When I mouse over the div in both Chrome, IE and Edge, I will see the width animate from 10% to 100%.
When I mouse over the div in Chrome, the animation speed starts fast and ends slow. When I mouse out, the animation speed starts fast and ends slow.
When I mouse over the div in IE 11 or Edge, the animation speed starts fast and ends slow. When I mouse out, the animation speed starts slow and ends fast.
Can I get IE11 and Edge to behave the same as Chrome? If so, how do I do it?
