Css3动画在IE11中不起作用

Question

嗨，我有这个动画。 它适用于Chrome，Firefox，Safari，但不适用于IE 11.你能告诉我哪里有问题吗？ 我找不到为什么它在IE中不起作用。 当我读IE11时应该使用css转换就好了。

 .box { width: 100px; height: 100px; } .box div { background-color: blue; width: 50px; height: 100px; float: left; } .rotateDoorsLeft { animation: rotateDoorsLeft .75s infinite ease 0s alternate; -webkit-animation: rotateDoorsLeft .75s infinite ease 0s alternate; -moz-animation: rotateDoorsLeft .75s infinite ease 0s alternate; -ms-animation: rotateDoorsLeft .75s infinite ease 0s alternate; } .rotateDoorsRight { animation: rotateDoorsRight .75s infinite ease 0s alternate; -webkit-animation: rotateDoorsRight .75s infinite ease 0s alternate; -moz-animation: rotateDoorsRight .75s infinite ease 0s alternate; -ms-animation: rotateDoorsRight .75s infinite ease 0s alternate; } @-webkit-keyframes rotateDoorsLeft { from { -webkit-transform: perspective(360) rotateY(90deg); -webkit-transform-origin: 100% 50%; } to { -webkit-transform: perspective(360) rotateY(0deg); -webkit-transform-origin: 100% 50%; } } @-webkit-keyframes rotateDoorsRight { from { -webkit-transform: perspective(360) rotateY(-90deg); -webkit-transform-origin: 0% 50%; } to { -webkit-transform: perspective(360) rotateY(0deg); -webkit-transform-origin: 0% 50%; } } @-moz-keyframes rotateDoorsLeft { from { -moz-transform: perspective(360) rotateY(90deg); -moz-transform-origin: 100% 50%; } to { -moz-transform: perspective(360) rotateY(0deg); -moz-transform-origin: 100% 50%; } } @-moz-keyframes rotateDoorsRight { from { -moz-transform: perspective(360) rotateY(-90deg); -moz-transform-origin: 0% 50%; } to { -moz-transform: perspective(360) rotateY(0deg); -moz-transform-origin: 0% 50%; } } @keyframes rotateDoorsLeft { from { transform: perspective(360) rotateY(90deg); transform-origin: 100% 50%; } to { transform: perspective(360) rotateY(0deg); transform-origin: 100% 50%; } } @keyframes rotateDoorsRight { from { transform: perspective(360) rotateY(-90deg); transform-origin: 0% 50%; } to { transform: perspective(360) rotateY(0deg); transform-origin: 0% 50%; } } @-ms-keyframes rotateDoorsLeft { from { -ms-transform: perspective(360) rotateY(90deg); -ms-transform-origin: 100% 50%; } to { -ms-transform: perspective(360) rotateY(0deg); -ms-transform-origin: 100% 50%; } } @-ms-keyframes rotateDoorsRight { from { -ms-transform: perspective(360) rotateY(-90deg); -ms-transform-origin: 0% 50%; } to { -ms-transform: perspective(360) rotateY(0deg); -ms-transform-origin: 0% 50%; } } 

 <div class="box"> <div class="left-box rotateDoorsLeft"></div> <div class="right-box rotateDoorsRight"></div> </div> 

Answer 1

将单位应用于perspective(360)值。 例如， perspective(360px) 。

从规格 ：

perspective() = perspective( <length> )

长度的定义是“ ......紧跟一个单位标识符的数字。 ”因此，在没有单位的情况下提供正的非零数字是无效的，因此在标准中没有给出所需的结果 - 兼容浏览器。