iOs Safari und Google Chrome SVG-Animation wird nicht angezeigt

Question

Ich habe jetzt schon eine ganze Weile damit zu kämpfen.

.intro #intro-n, 
.intro #intro-o, 
.intro #intro-a2 { 
    stroke-dasharray: 400; 
    stroke-dashoffset: 400; } 
.intro #intro-n { 
    /*-webkit-animation: intro-letters 0.9s linear;*/ 
    -webkit-animation-name: intro-letters; 
    -webkit-animation-duration: 0.9s; 
    -webkit-animation-timing-function: linear; 

    -moz-animation: intro-letters 0.9s linear; 
    animation: intro-letters 0.9s linear; 
    animation-name: intro-letters; 
    animation-duration: 0.9s; 
    animation-timing-function: linear; 

    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-delay: 0s; 
    -moz-animation-delay: 0s; 
    animation-delay: 0s; } 

    @-webkit-keyframes intro-letters { 
    0% { 

    } 
    100% { 
    stroke-dashoffset: 0; } } 

@-moz-keyframes intro-letters { 
    0% { 

    } 
    100% { 
    stroke-dashoffset: 0; } } 

@keyframes intro-letters { 
    0% { 

    } 
    100% { 
    stroke-dashoffset: 0; } } 

http://codepen.io/anon/pen/ORkZwG

Dieser Code funktioniert perfekt auf Windows (außer IE) und Android-Geräte, aber wenn ich versuche, es in iOS Safari-Animationen zu starten oder auch Chrom SVG sind leer.

Edit: Ja, es in iOS Desktop Google Chrome-Version funktioniert, aber es funktioniert nicht auf iOS Tablet Chrome noch Safari

Answer 1

Nach ziemlich viel Zeit in dieser Frage zu verbringen, ich geknackt es schließlich nach unten , so scheint es, dass das Problem in diesem Stück Code war:

.intro svg { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -o-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    width: 100%; 
    max-width: 250px; 
    /*-webkit-animation: intro-hide-element 0s linear;*/ 
    -webkit-animation-name: intro-hide-element; 
    -webkit-animation-duration: 0s; 
    -webkit-animation-timing-function: linear; 
    -moz-animation: intro-hide-element 0s linear; 
    animation: intro-hide-element 0s linear; 
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-delay: 5.1s; 
    -moz-animation-delay: 5.1s; 
    animation-delay: 5.1s; } 

Besonders hier:

-webkit-animation-duration: 0s; 
-moz-animation: intro-hide-element 0s linear; 
animation: intro-hide-element 0s linear; 

Wo kann man nach den sich verändernden:

-webkit-animation-duration: 0.001s; 
-moz-animation: intro-hide-element 0.001s linear; 
animation: intro-hide-element 0.001s linear; 

Die Animationen in Safari Tablet-Browser erschienen, ich bin mir nicht ganz sicher, warum es in Chrom und nicht Safari funktioniert, aber das war, was den Trick für mich getan hat, hoffentlich jemand kann ein bisschen mehr im Detail erklären, warum Das passiert, aber in der Zwischenzeit hoffe es, dass es jemandem hilft.