Comment synchroniser des animations CSS sur plusieurs éléments?

J'ai deux éléments sur une page que j'aimerais animer via CSS (plus précisément, -webkit-animation). L'animation elle-même tout simplement rebondit un élément en haut et en bas. Un élément est toujours affichée et de rebondissement, l'autre n'est pas animé jusqu'à ce que le passage de la souris (pointer).

Ma question est: Est-il possible de synchroniser (avoir les deux éléments atteindre leur apogée en même temps, etc), l'animation à travers les deux éléments, peu importe quand le 2ème élément de l'animation est commencé?

Voici mon code HTML:

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

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

et enfin, un travail de démonstration de la question: http://jsfiddle.net/7ZLmq/2/

(pour voir le problème, déplacez la souris sur le bloc jaune)

source d'informationauteur busticated

  1. 20

    Je ne pense pas que son possible nativement, mais vous pouvez réellement hack des fonctionnalités similaires à l'aide d'un rebondissement wrapper et une position modifiant

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

    démo http://jsfiddle.net/A92pU/1/

  2. 2

    Ressemble, vous pouvez juste pile deux de jaune et de basculer la visibilité sur :passez par l'intermédiaire d'un élément parent.

    Vous avez besoin de l'animation de toujours être en cours d'exécution, sinon vous rencontrerez le problème de synchronisation que vous avez.

    J'ai modifié ton code un peu pour obtenir c'.

  3. 2

    Vous pouvez utiliser un setInterval pour maintenir l'état d'animation de la première animation et de donner à l'autre l'animation d'un délai négatif à demander à son correspondant de l'image clé à droite de la souris.

    Lire à propos de l'état-le maintien de l'intervalle de chose icià la "Manipuler les Animations CSS" de la section; lire sur le délai négatif de chercher ici.

  4. 0

    la souris passe dessus:

    1. supprimer les classes d'animation à partir de deux éléments
    2. utilisation requestAnimationFrame(() => { ... add here "bounce" class to both elements })

    Devrait synchronisation très bien.