Có phần tử có 2 Hoạt ảnh CSS thực thi cùng một lúc

Question

Tôi đang thử nghiệm với hoạt ảnh WebKits.

Có thể cho một thành phần HTML có nhiều hoạt ảnh thực thi cùng một lúc không?

Ví dụ:

@-webkit-keyframes FADE 
    { 
     from { 
      opacity: 0; 
     } 
     to { 
      opacity: 1; 
     } 
    } 

    @-webkit-keyframes TRICKY 
    { 
     0% { 
      -webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0); 
     } 
     50% { 
      -webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0); 
     } 
     75% { 
      -webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0); 
     } 
     100% { 
      -webkit-transform: translate(0px,0) rotate(0) skew(0,0); 
     } 
    } 

// Can this element have FADE execute for 5 seconds BUT halfway between that animation 
// can I then start the TRICKY animation & make it execute for 2.5 seconds? 
#myEle { 
    -Webkit-animation-name: FADE TRICKY; 
    -Webkit-animation-duration: 5s 2.5s; 
} 

Trên đây là một ví dụ thực sự đơn giản. Tôi sẽ có nhiều thư viện hình ảnh động như xoay, phai, vv Và tôi không muốn phải viết một hình động đặc biệt nếu tôi muốn có một phần tử thực thi 2 hình động cùng một lúc.

Đây có phải là có thể ...

//Not sure if this is even valid CSS: can I merge 2 animations easily like this? 
@-webkit-keyframes FADETRICKY 
{ 
    FADE TRICKY; 
} 

Answer 1

Bạn sẽ phải tự kết hợp các hình ảnh động, tôi nghĩ.

Nếu bạn cần sử dụng một cái gì đó như thế này ở một số nơi tôi sẽ xem Less CSS hoặc tương tự, để bạn có thể sử dụng "mixin" (ví dụ: chức năng) để tạo css. Tôi sử dụng nó để tóm tắt css của nhà cung cấp cụ thể để trong tệp .less chính 5 hoặc 6 dòng mã trình duyệt cụ thể có thể được thay thế bằng một phương thức.

Answer 2

#myEle { 
    -Webkit-animation-name: FADE,TRICKY; 
    -Webkit-animation-duration: 5s,2.5s; 
} 

Sử dụng ',' không gian. Tôi đã ở trong phiên bản Chrome 16.0.899.0 để thử.