Chuyển đổi CSS hoặc hoạt ảnh không hoạt động trong Phonegap

Question

Tôi cần tạo ảnh động <div>. Đã thử sử dụng @keyframes và quá trình chuyển đổi. Dưới đây là một mã số:

CHUYỂN

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

keyframes

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

Tôi đang sử dụng cordova/PhoneGap 2.0.0 và nhắm mục tiêu android 4.0 trở lên. Tôi không thấy hoạt động này. Chuyển đổi và hoạt ảnh không hỗ trợ Phonegap? Xin vui lòng giúp đỡ.

Answer 1

Với Phonegap, bạn cần sử dụng các phiên bản tiền tố của thuộc tính vì nó chỉ là Webkit.

-webkit-animation: menuEffect 3s linear

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

Answer 2

Chỉ cần đừng quên để thêm vào trước -webkit- đến các thuộc tính css. Nó cố định tất cả các vấn đề cho tôi.

Mã này làm việc trong trường hợp của tôi:

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

Bạn cũng có thể sử dụng 'từ, để' và nó sẽ chỉ làm việc tốt.