Comment synchroniser les Animations CSS à travers plusieurs éléments?

j'ai deux éléments sur une page que j'aimerais animer via CSS (spécifiquement, -webkit-animation). L'animation elle-même fait simplement rebondir un élément de haut en bas. Un élément est toujours affiché et rebondissant, l'autre n'est pas animé jusqu'à ce que la souris survole (hover).

ma question Est: est-il possible de synchroniser (les deux éléments atteignent leur sommet en même temps, etc) l'animation à travers les deux éléments indépendamment de la date de démarrage de l'animation du 2ème élément?

Ici my 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, une démo de travail de la question:http://jsfiddle.net/7ZLmq/2/

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

18
demandé sur busticated 2011-01-29 22:29:15

4 réponses

Je ne pense pas que ce soit possible nativement, mais vous pouvez en fait hacker des fonctionnalités similaires en utilisant un emballage rebondissant et une certaine modification de position

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/

21
répondu Valerij 2014-02-17 12:50:15

on dirait que vous pouvez simplement empiler deux des jaunes et activer la visibilité :passez en stationnaire à travers 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 ceci.

2
répondu Nick Dumais 2013-09-27 18:30:55

vous pourriez utiliser un setInterval pour maintenir l'état d'animation de la première animation et donner à l'autre animation un délai négatif pour chercher son image clé correspondante sur la souris.

lisez à propos de la chose State-maintain-interval-thing ici, à la section "manipulation des Animations CSS"; en savoir plus sur le délai négatif à rechercher ici.

2
répondu Protector one 2017-05-23 10:31:15

la souris passe dessus:

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

synchronisation des bien.

0
répondu user1038334 2018-06-15 13:12:12