Как синхронизировать CSS-анимацию между несколькими элементами?

Question

У меня есть два элемента на странице, которые я хотел бы анимировать с помощью CSS (в частности, -webkit-animation).Сама анимация просто подпрыгивает элемент вверх и вниз.Один элемент всегда отображается и подпрыгивает, другой не анимируется до наведения мыши (наведения).

У меня такой вопрос: возможно ли синхронизировать анимацию между обоими элементами (достичь обоих вершин одновременно и т. Д.) Независимо от того, когда начинается анимация 2-го элемента?

Вот мой 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:

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

демо http://jsfiddle.net/A92pU/1/

Answer 2

Вы можете использовать setInterval для поддержания состояния анимации первой анимации и дать другой анимации отрицательную задержку при поиске соответствующего ключевого кадра при наведении курсора мыши.

Читать о сохранении состояния-interval-thing здесь , в разделе «Управление CSS-анимациями»;читайте о отрицательной задержке для поиска здесь .

Answer 3

Похоже, вы можете просто сложить два желтых и включить видимость: навести курсор на родительский элемент.

Вам нужно, чтобы анимация всегда работала, иначе вы столкнетесь с проблемой синхронизации, которая у вас есть.

Я немного изменил ваш код, чтобы получить это.

Answer 4

при наведении мыши:

1. удаление классов анимации из обоих элементов
2. использование requestAnimationFrame(() => { ... add here "bounce" class to both elements })

Должна хорошо синхронизироваться.