CSS-Animation funktioniert nicht auf dem iPad Chrom oder Safari

Question

Hallo Ich habe eine einfache CSS-Animation, die gut auf dem Desktop läuft, aber nicht auf dem iPad funktioniert. Ich habe sowohl Chrom als auch Safari ausprobiert.

Heres der Code:

.scroll-down img { 
    -webkit-animation: 3s ease 0s normal none infinite running myscroll; 
    -moz-animation: 3s ease 0s normal none infinite running myscroll; 
    animation: 3s ease 0s normal none infinite running myscroll; 
} 

@-webkit-keyframes myscroll { 
    0% { 
     opacity: 1 
    } 
    50% { 
     opacity: 1 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateY(101px); 
     transform: translateY(101px); 
    } 
} 

Muss ich irgendeine Art von Syntaxfehler haben?

Dank

Answer 1

immer fügen Sie die generische - spezifische Version von CSS nicht Browser als auch den Browser ein ex verwenden.

@-webkit-keyframes myscroll { 
    0% { 
     opacity: 1 
    } 
    50% { 
     opacity: 1 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateY(101px); 
     transform: translateY(101px); 
    } 
} 

@keyframes myscroll { 
    0% { 
     opacity: 1 
    } 
    50% { 
     opacity: 1 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateY(101px); 
     transform: translateY(101px); 
    } 
} 

Answer 2

Eine Lösung gefunden. Scheinbar wie Stenografie iPad tut so dass ich dies tun musste:

-webkit-animation-name: myscroll; 
-webkit-animation-duration: 3s; 
-webkit-animation-delay: 0s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: ease; 
-webkit-animation-direction: normal; 
-webkit-animation-fill-mode: none; 
-webkit-animation-play-state: running; 

animation-name: myscroll; 
animation-duration: 3s; 
animation-delay: 0s; 
animation-iteration-count: infinite; 
animation-timing-function: ease; 
animation-direction: normal; 
animation-fill-mode: none; 
animation-play-state: running;