min-width not working in #keyframe animation in IE - css

Question

Trying to have a div expand on page load:
#box {
width: 10px; height: 10px;
-moz-animation: expandwidth 1s forwards;
animation: expandwidth 1s forwards;
}
while the following animation works as expected in firefox:
#-moz-keyframes expandwidth{
100% {width: 60%; min-width: 800px;}
}
this won't quite work in IE 11:
#keyframes expandwidth{
100% {width: 60%; min-width: 800px;}
}
in fact, while it does expand to 60% length, it does not take into account the min-width requirement, which can easily be seen as I shrink the browser size horizontally. In firefox however, it does not shrink under 800px, as intended. Am I doing something wrong? I cannot seem to find anything regarding min-width being unsupported in IE animations. Also note that I am looking for a css fix only. Thanks.
Edit: see http://jsfiddle.net/qyan20k9/
works for me in FFX 31.0 but not in IE 11

Answer 1

I've tested this in IE11, Chrome 38 (64bit)& FF31 and it seems to work is you establish a min-width to start with.
JSfiddle Demo
#box {
width: 10px;
height: 30px;
min-width:10px; /* here */
-moz-animation: expandwidth 1s forwards;
-webkit-animation: expandwidth 1s forwards;
animation: expandwidth 1s forwards;
background: grey;
}
#-webkit-keyframes expandwidth {
100% {
width: 60%;
min-width: 800px;
}
}
#-moz-keyframes expandwidth {
100% {
width: 60%;
min-width: 800px;
}
}
#keyframes expandwidth {
100% {
width: 60%;
min-width: 800px;
}
}