Przejście CSS lub animacja nie działa w phonegap

Question

Potrzebuję animować <div>. Próbowałem używając @keyframes i przejścia. Oto kod:

TRANSITION

#menu{ 
... 
width:70%; 
-webkit-transition: width 5s; 
.. 
} 

keyframes

#menu{ 
    ... 
    width:70%; 
    animation: menuEffect 3s; 
    .. 
    } 
@keyframes menuEffect 
{ 
from {width:0%;} 
to {width:70%;} 
} 

Używam Cordova/PhoneGap 2.0.0 i kierowania Android 4.0 i wyżej. Nie widzę tego działa. Czy przejście i animacja nie obsługują phonegapa? Proszę o pomoc.

Answer 1

W przypadku Phonegapa należy użyć wstępnie ustawionych wersji właściwości, ponieważ jest to po prostu Webkit.

-webkit-animation: menuEffect 3s linear

@-webkit-keyframes menuEffect 
{ 
    from { 
     width:0%; 
    } 
    to { 
     width:70%; 
    } 
} 

Answer 2

Tylko nie zapomnij poprzedzić -webkit- do właściwości CSS. Naprawił dla mnie wszystkie problemy.

Ten kod działa w moim przypadku:

/* Animation element id */ 
#animate { 
    position: absolute; 
    top: 100px; 
    left: 100px; 
    -webkit-animation: move 1s ease infinite; 
} 

@-webkit-keyframes move { 
    50% { 
     -webkit-transform: translate(100px, 100px); 
    } 
} 

Można również użyć „od do”, a byłoby to po prostu działać.