Question

尝试在页面加载时展开div：

#box {
width: 10px; height: 10px;
-moz-animation:    expandwidth 1s forwards;   
animation:         expandwidth 1s forwards; 
}

虽然以下动画在firefox中按预期工作：

@-moz-keyframes expandwidth{
  100% {width: 60%;  min-width: 800px;}
}

这在IE 11中不太适用：

@keyframes expandwidth{
  100% {width: 60%;  min-width: 800px;}
}

事实上，虽然它确实扩展到60％的长度，但它没有考虑最小宽度要求，这可以很容易地看作我横向缩小浏览器大小。然而，在Firefox中，它不会像预期的那样在800px下缩小。难道我做错了什么？我似乎无法找到关于IE动画中不支持min-width的任何内容。另请注意，我正在寻找一个css修复程序。感谢。

修改：见http://jsfiddle.net/qyan20k9/ 在FFX 31.0中适用于我但在IE 11中不适用

Answer 1

我已经在IE11，Chrome 38（64位）＆amp; amp; FF31，它似乎工作，你建立一个min-width开始。

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

最小宽度在IE中的@keyframe动画中不起作用

1 个答案: