सीएसएस संक्रमण या एनीमेशन फोनगैप

Question

में काम नहीं कर रहा है मुझे <div> को एनिमेट करने की आवश्यकता है। @keyframes और संक्रमण का उपयोग करने का प्रयास किया।

TRANSITION

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

मुख्य-फ़्रेम

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

मैं कॉर्डोबा/phonegap 2.0.0 का उपयोग कर रहा है और एंड्रॉयड 4.0 और इसके बाद के संस्करण को लक्षित: यहाँ एक कोड है। मुझे यह काम नहीं दिख रहा है। क्या संक्रमण और एनीमेशन फोनगैप का समर्थन नहीं करता है? कृपया सहायता करें।

Answer 1

फोनगैप के साथ आपको गुणों के प्रीफ़िक्स्ड संस्करणों का उपयोग करने की आवश्यकता है क्योंकि यह केवल वेबकिट है।

-webkit-animation: menuEffect 3s linear

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

Answer 2

बस सीएसएस गुणों के -webkit- पहले जोड़ें करने के लिए मत भूलना। यह मेरे लिए सभी समस्याओं को ठीक करता है।

इस कोड को मेरे मामले में काम किया:

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

तुम भी 'के लिए, से' का उपयोग कर सकते हैं और यह सिर्फ ठीक काम करेगा।