如何同步CSS动画跨多个元素？ [英] How To Sync CSS Animations Across Multiple Elements?

问题描述

我在一个页面上有两个元素，我想通过CSS动画（具体来说，-webkit-animation）。动画本身只是上下弹起一个元素。一个元素总是显示和弹跳，另一个不动画，直到鼠标悬停（悬停）。

我的问题是：是否可以同步（两个元素同时到达它们的顶点等）两个元素的动画，无论第二个元素的动画

这是我的HTML：

 < div id =bouncy01>滴< / 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/

（看到问题，鼠标悬停在黄色块）

解决方案

我不认为它可能是本机的，通过使用弹跳包装和某些位置修改来破解类似的功能

html：

 < div id =bouncywrap> 
< div id =bouncy01>滴< / div> 
< div id =bouncy02> droP< / div> 
< div> 
  

CSS：

  @  -  webkit-keyframes bounce {
 0％{padding-top：1px;} 
 / *使用填充，因为它不影响位置：sublinks的相对
 * using 0而不是0 b / c的盒子模型问题，
 *孩子的边缘，但父母没有保证金，只是尝试出
 * / 
 50％{padding-top：5px ;} / *期望值+ 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：gray; / * debug * / 
} 
＃bouncy02 {
 background：＃ffff00; 
 left：60px; 
 top：2px; / *一半的期望值，只是一个修复的光学* / 
} 
＃bouncy02：hover {
 position：relative; / *这里发生的魔法* / 
 top：0px; 
} 
  

demo http://jsfiddle.net/A92pU/1/

I have two elements on a page that I'd like to animate via CSS (specifically, -webkit-animation). The animation itself simply bounces an element up and down. One element is always shown and bouncing, the other is not animated until mouse-over (hover).

My question is: Is it possible to sync (have both elements reach their apex at the same time, etc) the animation across both elements regardless of when the 2nd element's animation is started?

Here's my HTML:

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

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

and finally, a working demo of the issue: http://jsfiddle.net/7ZLmq/2/

(to see the problem, mouse-over the yellow block)

解决方案

I don't think its possible natively, but you can actually hack similar functionality by using a bouncing wrapper and some position altering

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

demo http://jsfiddle.net/A92pU/1/

这篇关于如何同步CSS动画跨多个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！