Question

我正在尝试找出{strong> Internet Explorer（10）中我的本地网站中css3动画无效的原因。在任何其他浏览器中一切都很好（Chrome，Firefox）。通过媒体查询等了解即中的范围问题。因此，除了div容器和应该应用动画的css声明之外，我尝试通过从html页面中删除任何内容来减少错误来源。在试图找到问题时，我创建了fiddle，并对它在那里工作感到惊讶！？！。

因此，考虑到差异，我只在示例页面上找到style标记，而不是链接到外部css文件。但是将css放入外部文件也没有成功。

别知道我应该寻找什么。

这是html代码：

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9">
</head>
<body>
<style type="text/css">
    @-webkit-keyframes scaleUpDown {
        from {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        to {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
    }

    @keyframes scaleUpDown {
        from {
            -webkit-transform: scale(1);
            /*-ms-transform: scale(1);*/
            transform: scale(1);
        }
        to {
            -webkit-transform: scale(1.5);
            /*-ms-transform: scale(1.5);*/
            transform: scale(1.5);
        }
    }

    div.scaling {
        width: 100px;
        height: 100px;
        position: absolute;
        display: block;;
        left: 100px;
        top: 100px;
        background-color: #00f;
        z-index: 1;
        background-size: 100% auto;
        -webkit-animation-duration: 30s;
        animation-duration: 30s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-name: scaleUpDown;
        animation-name: scaleUpDown;
        -webkit-animation-direction: alternative;
        animation-direction: alternative;
        -webkit-transform-origin: bottom center 50%;
        -ms-transform-origin: bottom center 50%;
        transform-origin: bottom center 50%;
    }
</style>
<div class="scaling"></div>
</body>
</html>

CSS3动画和IE11不能在html文件中工作，但在jsfiddle很好

0 个答案: