Question

我有一个CSS动画，可以在除IE 10之外的所有浏览器中运行 - 它只会转换阴影。

我最终知道导致问题的原因。它似乎与类选择器或其他东西有关。

见这里：

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和backface-visibility：hidden;

似乎是一个问题

请参阅此处的问题：

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

CSS动画问题 - 转换 - 在IE 10中

1 个答案: