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

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

iOS - CSS Keyframes do not animate, only sometimes

css

animation

keyframe

css-animations