CSS-Übergang oder Animation funktioniert nicht in Phonegap

Question

Ich brauche eine <div> animieren. Versucht mit @keyframes und Übergang. Hier ist ein Code:

TRANSITION

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

KeyFrames

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

Ich verwende cordova/phonegap 2.0.0 und Android 4.0 Targeting und höher. Ich sehe das nicht funktioniert. Unterstützt Transition und Animation Phonegap nicht? Bitte helfen.

Answer 1

Mit Phonegap müssen Sie die Präfix-Versionen der Eigenschaften verwenden, da es nur Webkit ist.

-webkit-animation: menuEffect 3s linear

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

Answer 2

nur nicht vergessen, -webkit- auf die CSS-Eigenschaften vorangestellt wird. Es hat alle Probleme für mich behoben.

Dieser Code funktioniert in meinem Fall:

/* 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); 
    } 
} 

Sie können auch verwenden ‚aus, zu‘ und es würde gut funktionieren.