如何同步多个元素的CSS动画？

我在页面上有两个元素,我想通过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/

(看到问题,鼠标在黄色块上)

解决方法

我不认为它可能是天生的,但你实际上可以通过使用弹跳包装器和一些位置改变来破解相似的功能

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/

如何同步多个元素的CSS动画？

解决方法

猜你在找的CSS相关文章