Проблемы с переходом CSS CSS

Question

Я пытаюсь создать простую страницу стиля флеш-карты css, и она работает во всех браузерах, кроме IE 11, и я не знаю, почему. Я предполагаю, что это что-то делать со следующим кодом:

/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
    -moz-perspective: 1000; 
    -webkit-perspective: 1000; 
} 
    /* flip the pane when hovered */ 
    .flip-container:hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
     -ms-transform: rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     -o-transform: rotateY(180deg); 

    } 

.flip-container, .front, .back { 
    width: 300px; 
    height: 300px; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.6s; 
    -webkit-transition: 0.6s; 
    -moz-transition: 0.6s; 
    -o-transition: 0.6s; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* front pane, placed above back */ 
.front { 
    z-index: 2; 
    /* for firefox 31 */ 
    transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 

} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
} 

Вот мой jsfiddle ... тест в Chrome, чтобы он работал, как предполагалось, а затем проверить в IE 11, чтобы увидеть это нарушение.

https://jsfiddle.net/xebcx8gt/2/

Answer 1

Вы должны указать, какие CSS свойство вы хотите добавить переход. Я предполагаю, что Chrome прощает и предполагает, что вы имели в виду all, когда ничего не указано.

Изменить transition: 0.6s; на transition: transform 0.6s;.

Дополнительную информацию о transition и ее синтаксисе можно найти MDN's page on it.