Проблема с CSS-анимацией - Transform - в IE 10

Question

У меня есть анимация CSS, которая работает во всех браузерах, кроме IE 10 - она ​​только трансформирует тень.

Я нахожусь на грани того, что вызывает проблему. Похоже, что это как-то связано с селекторами классов или чем-то еще.

Смотрите здесь:

http://codepen.io/pixelacorn/pen/RROwBL?editors=0100

setValue(216); 
 
setTimeout(function(){ 
 
    setValue(215); 
 
}, 3000); 
 
setTimeout(function(){ 
 
    setValue(214); 
 
}, 5000); 
 
setTimeout(function(){ 
 
    setValue(213); 
 
}, 10000); 
 
function setValue(value) { 
 

 
    $('.counter .counter_to') 
 
     .addClass('counter_hide') 
 
     .removeClass('counter_to') 
 
     .addClass('counter_from') 
 
     .removeClass('counter_hide') 
 
     .addClass('counter_n') 
 
     .find('span:not(.counter_shadow)').each(function (i, el) { 
 
     $(el).text(value); 
 
    }); 
 
    $('.counter .counter_from:not(.counter_n)') 
 
     .addClass('counter_hide') 
 
     .addClass('counter_to') 
 
     .removeClass('counter_from') 
 
      .removeClass('counter_hide') 
 
    .find('span:not(.counter_shadow)').each(function (i, el) { 
 
     $(el).text(value+1); 
 
    }); 
 

 

 
    $('.counter .counter_n').removeClass('counter_n'); 
 
}

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300|Oswald); 
 
body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.counter { 
 
    width: 100px; 
 
    height: 100px; 
 
    font-size: 50px; 
 
    line-height: 2em; 
 
    font-weight: normal; 
 
    font-family: 'Oswald', sans-serif; 
 
    display: inline-block; 
 
    position: relative; 
 
    top: -7px; 
 
} 
 

 
.counter > span { 
 
    display: block; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#f2f2f2)); 
 
    background: -webkit-linear-gradient(#FFF 0%, #f2f2f2 100%); 
 
    background: -moz-linear-gradient(#FFF 0%, #f2f2f2 100%); 
 
    background: -o-linear-gradient(#FFF 0%, #f2f2f2 100%); 
 
    background: linear-gradient(#FFF 0%, #f2f2f2 100%); 
 
    height: calc(50% - 1px); 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    backface-visibility: hidden; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.counter > span span { 
 
    color: #3C90EA; 
 
} 
 

 
.counter > span.counter_decor.counter_top { 
 
    box-shadow: 0 24px 43px -3px rgba(0, 0, 0, 0.45); 
 
} 
 

 
.counter > span.counter_decor.counter_bottom { 
 
    box-shadow: 0 2px 0px -1px #d8d8d8, 0 4px 0px -2px #c7c7c7, 0 6px 0px -3px #d8d8d8, 0 8px 0px -4px #c6c6c6, 0 10px 0px -5px #d6d6d6, 0 12px 0px -6px #c9c9c9, 0 14px 0px -7px #d8d8d8, 0 14px 23px -9px rgba(0, 0, 0, 0.8); 
 
} 
 

 
.counter > span.counter_top { 
 
    box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2); 
 
    border-radius: 3px 3px 0 0; 
 
} 
 

 
.counter > span.counter_top span { 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
.counter > span.counter_bottom { 
 
    top: 50%; 
 
    box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2); 
 
    border-radius: 0 0 3px 3px; 
 
} 
 

 
.counter > span.counter_bottom span { 
 
    position: relative; 
 
    margin-top: -1em; 
 
    display: block; 
 
} 
 

 
.counter > span.counter_from.counter_top { 
 
    z-index: 2; 
 
    animation: to-fadeIn 1s; 
 
} 
 

 
.counter > span.counter_from.counter_bottom { 
 
    z-index: 1; 
 
    transform-origin: 0% 0%; 
 
    animation: from-flip 1s; 
 
} 
 

 
.counter > span.counter_to.counter_top { 
 
    z-index: 0; 
 
    transform-origin: 100% 100%; 
 
    animation: to-flip 1s; 
 
} 
 

 
@keyframes to-fadeIn { 
 
    0% { 
 
    z-index: 0; 
 
    } 
 
    99% { 
 
    z-index: 0; 
 
    } 
 
    100% { 
 
    z-index: 2; 
 
    } 
 
} 
 

 
@keyframes from-flip { 
 
    0% { 
 
    transform: rotateX(180deg); 
 
    } 
 
    100% { 
 
    transform: rotateX(0deg); 
 
    } 
 
} 
 

 
@keyframes to-flip { 
 
    0% { 
 
    transform: rotateX(0deg); 
 
    z-index: 1; 
 
    } 
 
    100% { 
 
    transform: rotateX(-180deg); 
 
    } 
 
} 
 

 
@keyframes fade-out { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes fade-in { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.counter .counter_shadow { 
 
    display: block; 
 
    width: 100%; 
 
    position: absolute; 
 
    height: 100%; 
 
    left: 0; 
 
    top: -200%; 
 
    overflow: hidden; 
 
    z-index: 0; 
 
    opacity: 0; 
 
} 
 

 
.counter .counter_top .counter_shadow { 
 
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); 
 
} 
 

 
.counter .counter_bottom .counter_shadow { 
 
    background: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); 
 
    top: 0; 
 
} 
 

 
.counter .counter_from.counter_top .counter_shadow { 
 
    animation: fade-out 1s; 
 
} 
 

 
.counter .counter_to.counter_bottom .counter_shadow { 
 
    animation: fade-in 1s; 
 
} 
 

 
.hide .shadow { 
 
    animation: none !important; 
 
} 
 

 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
 
    .counter > span span { 
 
    color: rgba(0, 0, 0, 0); 
 
    background: linear-gradient(#65AEE3 0%, #3C90EA 100%); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-stroke: 0.03em #4EA3E3; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1> 
 
    <div class="counter"> 
 
    <span class="counter_decor counter_top"></span> 
 
    <span class="counter_decor counter_bottom"></span> 
 
    <span class="counter_from counter_top"><span></span><span class="counter_shadow"></span></span> 
 
    <span class="counter_from counter_bottom"><span></span><span class="counter_shadow"></span></span> 
 
    <span class="counter_to counter_top"><span></span><span class="counter_shadow"></span></span> 
 
    <span class="counter_to counter_bottom"><span></span><span class="counter_shadow"></span></span> 
 
    </div> 
 
</h1>

Answer 1

Это, как представляется, проблема с IE 10 и невидимых поверхностей-видимость: скрытый;

См вопрос здесь:

Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?