iOS - CSS 关键帧不动画，只是有时

Question

我现在正在为我建立一个小网站。如果您单击导航项，则旧内容应在淡出时向后和向左滑动。新内容应在淡入和放大到 100% 时从右侧滑入。 （观看桌面上的实时示例）

在我的 mac 上一切正常，但在我的 iphone 上只有淡出动画有效（safari 和 chrome）。好吧，如果您加载网站，淡入动画有时会起作用，但如果您想切换内容，它永远不会起作用。在动画的持续时间内没有任何内容，然后内容立即出现在 100% 的关键帧处。

实时示例：http://haeki.com/haeki/ - 导航无法 100% 工作，但对于本示例来说应该足够了。 :-)

有人可以帮忙吗？

/* 动画代码 */

@keyframes fadeOut {
      0%{
        transform: scale(1) translate3d(0,0,0);
        opacity: 1;
      }
      25% {
        transform: scale(1) translate3d(0,100px,-100px);
        opacity: 0.5;
      }
      75% {
        transform: scale(1) translate3d(-500px,100px,-100px);
        opacity: 0;
      }
      100% {
        transform: scale(1) translate3d(-500px,100px,-100px);
        opacity: 0;
        display: none;
      }
  }

  @-webkit-keyframes fadeOut {
      0%{
        -webkit-transform: scale(1) translate3d(0,0,0);
        opacity: 1;
      }
      25% {
        -webkit-transform: scale(1) translate3d(0,100px,-100px);
        opacity: 0.5;
      }
      75% {
        -webkit-transform: scale(1) translate3d(-500px,100px,-100px);
        opacity: 0;
      }
      100% {
        -webkit-transform: scale(1) translate3d(-500px,100px,-100px);
        opacity: 0;
        display: none;
      }
  }

  @keyframes fadeIn {
      0%{
        transform: scale(1) translate3d(500px,100px,-100px);
        opacity: 0;
      }
      25% {
        transform: scale(1) translate3d(500px,100px,-100px);
        opacity: 0;
      }
      75% {
        transform: scale(1) translate3d(0,100px,-100px);
        opacity: 0.5;
      }
      100% {
        transform: scale(1) translate3d(0,0,0);
        opacity: 1;
      }
  }
  @-webkit-keyframes fadeIn {
      0%{
        -webkit-transform: scale(1) translate3d(500px,100px,-100px);
        opacity: 0;
      }
      25% {
        -webkit-transform: scale(1) translate3d(500px,100px,-100px);
        opacity: 0;
      }
      75% {
        -webkit-transform: scale(1) translate3d(0,100px,-100px);
        opacity: 0.5;
      }
      100% {
        -webkit-transform: scale(1) translate3d(0,0,0);
        opacity: 1;
      }
  }
  .inactive{
    -webkit-animation: fadeOut 2s forwards;
    animation: fadeOut 2s forwards;
  }
  .active{
    -webkit-animation: fadeIn 2s forwards;
    animation: fadeIn 2s forwards;
  }

Answer 1

是一个 iOS 9.2 错误。更新到 9.3 并且它工作。很好的投入了 3 个小时.. :-D