css - 应用动画未在 IE 11 中运行

标签 css internet-explorer internet-explorer-11 css-animations

下面是我的 .css 部分,我在其中对元素“cog”应用了一些动画:

 .active-svg #cog {
    animation: cog 5s linear infinite;
    transform-origin: 75% 75%;
}

@keyframes cog {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-ms-keyframes cog {

    from {
        -ms-transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
    }
}

它在 FF 和 Chrome 中运行良好,甚至在 IE 中检查这个特定元素时它也存在于那里,但与其他浏览器不同,它没有动画。知道为什么即使应用了它也没有动画吗?

最佳答案

它在 IE 11 中完美运行。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s linear infinite;
	transform-origin: 75% 75%;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Standard syntax */
@keyframes example {
    
    from {
        -ms-transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
    }
}
</style>
</head>
<body>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>

<div></div>


</body>
</html>

关于css - 应用动画未在 IE 11 中运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52271453/

相关文章:

jquery - IE8 使用 JQuery 设置最小宽度的不同尝试给我带来了问题

javascript - 当开发人员工具打开 IE11 时,网站的行为有所不同

javascript - 是否有 IE11 兼容的解决方法让 Vue 在 for 循环中为每个项目呈现多个表行?

CSS3 动画/关键帧在 IE11 中不起作用

jquery - 无限旋转图像

html - 如何使 flexbox 子行居中?

javascript - 我不能在 if 语句中从 jQuery .outerHeight() 中减去

javascript - Internet Explorer 错误消息 "The operation was timed out"

javascript - 是否可以粘贴溢出的 HTML 元素?

internet-explorer - 使用不同浏览器在 Play Framework 中上传文件