Question

所以我有一个动画我试图在我的网站上播放：http://eayusi.design

无论我使用什么浏览器，它似乎都无法在我的iPhone上运行。我已经在动画之前添加了-webkit-，如其他答案所示，但这似乎并没有起作用。我很感激能得到帮助的人。我目前正在最新的iOS上使用iPhone 6。

  html
  {
    font-size: 62.5%;
  }

  body
  {
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    background: black;
    text-align: center;
    letter-spacing: 20px;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
  }

  .glitch
  {
    position:relative;
    top: 40%;
    color: white;
  }

  .glitch:before, .glitch:after{
    content: 'Coming soon';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:black;
  }

  .glitch:before{
    left: 4px;
    text-shadow: 2px 0 #00ffea;
    animation: effect 3s infinite linear;
    -webkit-animation: effect 3s infinite linear;
    clip: rect(45px, 9999px, 38px, 0);
  }

  .glitch:after{
    left: -2px;
    text-shadow: -2px 0 tomato;
    animation: effect 2s infinite linear;
    -webkit-animation: effect 2s infinite linear;
  }

  @keyframes effect {
      0% {
        clip: rect(42px, 9999px, 44px, 0);
      }
      5% {
        clip: rect(12px, 9999px, 59px, 0);
      }
      10% {
        clip: rect(48px, 9999px, 29px, 0);
      }
      15.0% {
        clip: rect(42px, 9999px, 73px, 0);
      }
      20% {
        clip: rect(63px, 9999px, 27px, 0);
      }
      25% {
        clip: rect(34px, 9999px, 55px, 0);
      }
      30.0% {
        clip: rect(86px, 9999px, 73px, 0);
      }
      35% {
        clip: rect(20px, 9999px, 20px, 0);
      }
      40% {
        clip: rect(26px, 9999px, 60px, 0);
      }
      45% {
        clip: rect(25px, 9999px, 66px, 0);
      }
      50% {
        clip: rect(57px, 9999px, 98px, 0);
      }
      55.0% {
        clip: rect(5px, 9999px, 46px, 0);
      }
      60.0% {
        clip: rect(82px, 9999px, 31px, 0);
      }
      65% {
        clip: rect(54px, 9999px, 27px, 0);
      }
      70% {
        clip: rect(28px, 9999px, 99px, 0);
      }
      75% {
        clip: rect(45px, 9999px, 69px, 0);
      }
      80% {
        clip: rect(23px, 9999px, 85px, 0);
      }
      85.0% {
        clip: rect(54px, 9999px, 84px, 0);
      }
      90% {
        clip: rect(45px, 9999px, 47px, 0);
      }
      95% {
        clip: rect(37px, 9999px, 20px, 0);
      }
      100% {
        clip: rect(4px, 9999px, 91px, 0);
      }
    }

    @-webkit-keyframes effect {
        0% {
          clip: rect(42px, 9999px, 44px, 0);
        }
        5% {
          clip: rect(12px, 9999px, 59px, 0);
        }
        10% {
          clip: rect(48px, 9999px, 29px, 0);
        }
        15.0% {
          clip: rect(42px, 9999px, 73px, 0);
        }
        20% {
          clip: rect(63px, 9999px, 27px, 0);
        }
        25% {
          clip: rect(34px, 9999px, 55px, 0);
        }
        30.0% {
          clip: rect(86px, 9999px, 73px, 0);
        }
        35% {
          clip: rect(20px, 9999px, 20px, 0);
        }
        40% {
          clip: rect(26px, 9999px, 60px, 0);
        }
        45% {
          clip: rect(25px, 9999px, 66px, 0);
        }
        50% {
          clip: rect(57px, 9999px, 98px, 0);
        }
        55.0% {
          clip: rect(5px, 9999px, 46px, 0);
        }
        60.0% {
          clip: rect(82px, 9999px, 31px, 0);
        }
        65% {
          clip: rect(54px, 9999px, 27px, 0);
        }
        70% {
          clip: rect(28px, 9999px, 99px, 0);
        }
        75% {
          clip: rect(45px, 9999px, 69px, 0);
        }
        80% {
          clip: rect(23px, 9999px, 85px, 0);
        }
        85.0% {
          clip: rect(54px, 9999px, 84px, 0);
        }
        90% {
          clip: rect(45px, 9999px, 47px, 0);
        }
        95% {
          clip: rect(37px, 9999px, 20px, 0);
        }
        100% {
          clip: rect(4px, 9999px, 91px, 0);
        }
      }
  </style>
</head>
<body>
  <h1 class="glitch">Coming soon</h1>
</body>
</html>

Answer 1

我能够通过包括以下内容让它在移动设备上运行：

.glitch:before, .glitch:after {
    clip: rect(0,0,0,0);
}

Here是一个Codepen，它演示了它在移动设备上工作。我做了一些仍然在Codepen中的其他更改，但这是使其正常工作的更改。

我正在修补基于CSS-Tricks的another post的代码，他们通过SASS开始工作。说实话，我不确定为什么它有效，因为我没有大量的剪裁或面具经验，但事实确实如此。

编辑：另请注意，剪辑属性已被折旧。因此，可能值得找到一种替代实现，该实现在SVG内部的元素上使用剪辑路径。当我找到一些额外的空闲时间时，我会看看是否可以创建一个示例。

关键帧动画无法在iPhone上运行

1 个答案: