ios - CSS 关键帧有时仅在 iOS 中具有动画效果

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-Bug。更新到 9.3 并且有效。好的投入了 3 小时..:-D