Keyframe-Animation funktioniert nicht auf dem iPhone

Question

So habe ich eine Animation Ich versuche auf meiner Website zu spielen: http://eayusi.design

Es scheint nicht auf meinem iPhone zu arbeiten, unabhängig davon, was Browser ich verwende. Ich habe das -Webkit- vor der Animation hinzugefügt, wie von anderen Antworten vorgeschlagen, aber das scheint nicht zu funktionieren. Ich würde jede Hilfe schätzen, die ich Kerle bekommen kann. Ich verwende derzeit ein iPhone 6 auf dem neuesten iOS.

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

konnte ich es auf das mobile Arbeiten erhalten, indem:

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

Here ein Codepen ist, dass es auf das mobile Arbeiten demonstriert. Ich machte ein paar andere Änderungen, die immer noch im Codepen sind, aber das war die Änderung, die es richtig funktionieren ließ.

Ich bastelte an Ihrem Code basierend auf another post von CSS-Tricks, wo sie es über SASS arbeiten. Um ganz ehrlich zu sein, ich bin mir nicht sicher, warum es funktioniert, da ich nicht viel Erfahrung mit Clipping oder Masken habe, aber es tut.

Bearbeiten: Beachten Sie auch, dass die Clip-Eigenschaft abgeschrieben wurde. Es kann also sinnvoll sein, eine Ersatzimplementierung zu finden, die clip-path auf Elementen innerhalb von SVGs verwendet. Ich werde sehen, ob ich ein Beispiel erstellen kann, wenn ich etwas mehr Freizeit finde.