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

问题描述

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

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?

下面是我的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/

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

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

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

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