css3支持IE11,html - Css3 animation doesn't work in IE11 - Stack Overflow

.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%;

}

}