여러 요소에서 CSS 애니메이션을 동기화하는 방법은 무엇입니까?

Question

CSS (특히 -webkit-animation)를 통해 애니메이트하려는 페이지에 두 개의 요소가 있습니다. 애니메이션 자체는 요소를 위아래로 반송합니다. 한 요소는 항상 표시되고 튀는 데, 다른 요소는 마우스를 올릴 때까지 움직이지 않습니다 (마우스 오버).

제 질문은 : 두 요소의 애니메이션이 시작될 때와 관계없이 두 요소 모두에서 애니메이션을 동기화 (두 요소가 동시에 정점에 도달하도록하는 등) 할 수 있습니까? 여기

내 HTML입니다 :

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

내 CSS :

@-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; 
} 

그리고 마지막으로, 문제의 작동 데모 : http://jsfiddle.net/7ZLmq/2/

(문제, 마우스 오버를 볼 수 있습니다 노란색 블록)

Answer 1

나는 네이티브로는 가능하지 않다고 생각하지만 실제로 튀는 래퍼 및 변경 어떤 위치를 사용하여 유사한 기능을 해킹

HTML :

CSS

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

: 그냥 노란색의 두 가지를 쌓을 수처럼

@-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; 
} 

데모 http://jsfiddle.net/A92pU/1/

Answer 2

가 보이는 부모 요소를 통해 마우스를 가져 가면 가시성이 전환됩니다.

항상 실행되고있는 애니메이션이 필요합니다. 그렇지 않으면 동기화 문제가 발생합니다.

나는 조금 this.

Answer 3

당신은 첫 번째 애니메이션의 애니메이션 상태를 유지하고 다른 애니메이션을 마우스 오버에의 일치하는 키 프레임에 추구하는 음의 지연을 제공하기 위해 setInterval을 사용할 수 있습니다 얻을 수 있도록 코드를 수정했습니다.

"CSS 조작 애니메이션"섹션에서 상태 유지 간격 항목 here에 대해 읽으십시오. 부정적인 지연에 대해 읽고 here을 찾으십시오.