CSS - 変形：rotateXアニメーションがモバイルブラウザで動作しない（-webkit-の場合でも）

Question

pageに単語が回転している動画があります。 transform:rotateX(90deg)を使用して、このCSSのキーフレームアニメーションでザッツ行わ：

.words .active{ 
    display:inline-block; 
    -webkit-transform-origin: 50% 55%; 
    -moz-transform-origin: 50% 55%; 
    -ms-transform-origin: 50% 55%; 
    -o-transform-origin: 50% 55%; 
    transform-origin: 50% 55%; 
    -webkit-animation:ueli 3s forwards; 
    -moz-animation:ueli 3s forwards; 
    -ms-animation:ueli 3s forwards; 
    -o-animation:ueli 3s forwards; 
    animation:ueli 3s forwards; 
} 
@-webkit-keyframes ueli{ 
    0%{ 
    opacity:0; 
    -webkit-transform:rotateX(-90deg); 
    } 
    50%{ 
    -webkit-transform:rotateX(0deg); 
    opacity:1; 
    } 
    100%{ 
    -webkit-transform:rotateX(90deg); 
    opacity:0; 
    } 
} 
@keyframes ueli{ 
    0%{ 
    opacity:0; 
    transform:rotateX(-90deg); 
    } 
    50%{ 
    transform:rotateX(0deg); 
    opacity:1; 
    } 
    100%{ 
    transform:rotateX(90deg); 
    opacity:0; 
    } 
} 

私は、彼らがのUIWebViewに基づいているため、iOSの上のすべてのブラウザは、WebKitのを使用していることを、別のquestionに読みました。そこで私はアニメーションにwebkitを追加しました。 しかし、モバイルデバイスではまだ動作していません。
についてcaniuse.com私は、変換プロパティがモバイルでサポートされていて、はいであることをテストしました。それは私が推測する問題ではありません。誰でもどのように私はそれを修正することができます知っている？
ありがとうございます！

Answer 1

解決策＃1

これを使用してみてください：

-webkit-animation-name: ueli; 
-webkit-animation-duration: 3s; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-timing-function: linear; 
-webkit-animation-fill-mode: forwards; 

代わりの

-webkit-animation:ueli 3s forwards; 

このはあなたの問題を解決することができます。

---

可能な溶液＃2

各ブラウザのキーフレームに別の名前を使用してみてください。

-webkit-animation: webkit-ueli 3s forwards; 
animation:ueli 3s forwards; 

そして

@-webkit-keyframes webkit-ueli{ 
    @keyframes ueli{ 

---

解決策＃3

"注：このプロパティは、transformプロパティと一緒に使用する必要があります。"

キーフレームの外側にトランスフォームを追加してみてください。 W3schools ref

Answer 2

あなたのstyle.css -webkit-keyframesで

このコードを試してみてください間違っ

@-webkit-keyframes ueli { 
    0% { 
     opacity: 0; 
     transform: rotateX(-90deg); 
    } 
    50% { 
     transform: rotateX(0deg); 
     opacity: 1; 
    } 
    100% { 
     transform: rotateX(90deg); 
     opacity: 0; 
    } 
} 

@keyframes ueli { 
    0% { 
     opacity: 0; 
     -webkit-transform: rotateX(-90deg); 
    } 
    50% { 
     -webkit-transform: rotateX(0deg); 
     opacity: 1; 
    } 
    100% { 
     -webkit-transform: rotateX(90deg); 
     opacity: 0; 
    } 
} 

@-webkit-keyframes ueli { 
    0% { 
     opacity: 0; 
     -webkit-transform: rotateX(-90deg); 
    } 
    50% { 
     -webkit-transform: rotateX(0deg); 
     opacity: 1; 
    } 
    100% { 
     -webkit-transform: rotateX(90deg); 
     opacity: 0; 
    } 
} 

@keyframes ueli { 
    0% { 
     opacity: 0; 
     transform: rotateX(-90deg); 
    } 
    50% { 
     transform: rotateX(0deg); 
     opacity: 1; 
    } 
    100% { 
     transform: rotateX(90deg); 
     opacity: 0; 
    } 
} 

に変更、それを書かれていることは、IOS DEMO

に私の作品