Làm thế nào để đồng bộ ảnh động CSS trên nhiều yếu tố?

Question

Tôi có hai yếu tố trên trang mà tôi muốn tạo hiệu ứng động qua CSS (cụ thể là -webkit-animation). Bản thân hình động chỉ đơn giản là trả về một phần tử lên xuống. Một phần tử luôn được hiển thị và nảy, phần tử khác không được hoạt ảnh cho đến khi di chuột qua (di chuột).

Câu hỏi của tôi là: Có thể đồng bộ hóa (có cả hai phần tử đạt đến đỉnh của chúng cùng một lúc, v.v.) hoạt ảnh trên cả hai phần tử bất kể khi hoạt ảnh của phần tử thứ 2 được bắt đầu không?

Dưới đây là HTML của tôi:

<div id="bouncy01">Drip</div> 
<div id="bouncy02">droP</div> 

và CSS của tôi:

@-webkit-keyframes bounce { 
    0% {-webkit-transform: translateY(0px);} 
    25% {-webkit-transform: translateY(-2px);} 
    50% {-webkit-transform: translateY(-4px);} 
    75% {-webkit-transform: translateY(-2px);} 
    100% {-webkit-transform: translateY(0px);} 
} 
#bouncy01, 
#bouncy02 { 
    margin:10px; 
    float: left; 
    background: #ff0000; 
    padding: 10px; 
    border: 1px solid #777; 
} 
#bouncy01 { 
    -webkit-animation:bounce 0.25s ease-in-out infinite alternate; 
} 
#bouncy02 { 
    background: #ffff00; 
} 
#bouncy02:hover { 
    -webkit-animation:bounce 0.25s ease-in-out infinite alternate; 
} 

và cuối cùng, một bản demo làm việc về vấn đề này: http://jsfiddle.net/7ZLmq/2/

(để xem vấn đề, mouse-over khối màu vàng)

Answer 1

Tôi không nghĩ rằng nó có thể nguyên bản, nhưng bạn thực sự có thể Hack chức năng tương tự bằng cách sử dụng một wrapper nảy và một số vị trí thay đổi

html:

<div id="bouncywrap"> 
    <div id="bouncy01">Drip</div> 
    <div id="bouncy02">droP</div> 
<div> 

CSS:

@-webkit-keyframes bounce { 
    0% { padding-top:1px;} 
/* using padding as it does not affect position:relative of sublinks 
* using 0 instead of 0 b/c of a box-model issue, 
* on kids wiht margin, but parents without margin, just try out 
*/ 
    50% { padding-top:5px;} /*desired value +1*/ 
    100% { padding-top:1px;} 
} 

#bouncy01, 
#bouncy02 { 
    margin:10px; 
    background: #ff0000; 
    padding: 10px; 
    border: 1px solid #777; 
    width:30px; 
     position:absolute; 
} 
#bouncywrap { 
    -webkit-animation:bounce 0.125s ease-in-out infinite; 
    position:relative; 
    width:140px; 
    height:50px; 
/* background:grey; /*debug*/ 
} 
#bouncy02 { 
    background: #ffff00; 
    left:60px; 
    top:2px; /*half of desired value, just a fix for the optic*/ 
} 
#bouncy02:hover { 
    position:relative; /*here happens the magic*/ 
    top:0px; 
} 

bản demo http://jsfiddle.net/A92pU/1/

Answer 2

Hình như bạn chỉ có thể ngăn xếp hai trong số vàng và chuyển đổi chế độ hiển thị trên: di chuột qua phần tử gốc.

Bạn cần hoạt ảnh luôn chạy nếu không bạn sẽ gặp sự cố đồng bộ hóa.

tôi đổi mã của bạn một chút để có được this.

Answer 3

Bạn có thể sử dụng một setInterval để duy trì trạng thái hoạt hình của phim hoạt hình đầu tiên và đưa ra các hình ảnh động khác một sự chậm trễ tiêu cực để tìm cách phù hợp keyframe trên mouse-over.

Đọc về trạng thái duy trì khoảng thời gian here, tại phần "Thao tác CSS động"; đọc về độ trễ âm để tìm kiếm here.