Css3 animation doesn't work in IE11

Question

Hi I have this animation. It works fine in Chrome, Firefox, Safari but not in IE 11. Could you please tell me where is problem? I can't find why it doesn't work in IE. As I read IE11 should work with css transforms just fine.

 .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

Apply a unit to the perspective(360) values. For instance, perspective(360px) .

From the Specification :

perspective() = perspective( <length> )

The definition of a length is " ...a number immediately followed by a unit identifier. " As such, in providing a positive non-zero number without a unit is invalid, and therefore doesn't give you the desired results in a standards-compliant browser.