CSS - 변형 : rotateX 애니메이션이 모바일 브라우저에서 작동하지 않습니다 (심지어 -webkit-와 함께)

Question

단어가 회전하는 내 page에 애니메이션이 있습니다. 이 CSS 키 프레임 애니메이션 transform:rotateX(90deg)을 사용하여 수행 그게 전부는 : 그들이있는 UIWebView 기반으로하기 때문에

.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; 
    } 
} 

I, 즉 iOS에서 모든 브라우저가 웹킷을 사용, 다른 question에 읽었습니다. 그래서 저는 애니메이션에 웹킷을 추가했습니다. 하지만 아직 모바일 장치에서 작동하지 않습니다.
On 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에서이 코드

시도는 DEMO

IOS에 나를 위해 작동

@-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; 
    } 
} 

에 잘못된

@-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; 
    } 
} 

변화에게 그것을 기록