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

How To Sync CSS Animations Across Multiple Elements?

提问by busticated

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).

我想通过 CSS（特别是 -webkit-animation）为页面上的两个元素设置动画。动画本身只是上下反弹一个元素。一个元素始终显示并弹跳，另一个元素直到鼠标悬停（悬停）才动画。

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:

这是我的 HTML：

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

and my CSS:

和我的 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/

最后，该问题的工作演示：http: //jsfiddle.net/7ZLmq/2/

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

（要查看问题，请将鼠标悬停在黄色块上）

采纳答案by Valerij

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

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

html:

html：

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

CSS:

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/

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

回答by Nick Dumais

Looks like you can just stack two of the yellow ones and switch visibility on :hover through a parent element.

看起来你可以只堆叠两个黄色的并通过父元素切换 :hover 的可见性。

You need the animation to always be running otherwise you'll run into the sync issue you've got.

您需要动画始终运行，否则您会遇到同步问题。

I modified your code a bit to get this.

我稍微修改了你的代码以获得这个。

回答by Protector one

You could use a setIntervalto maintain the animation state of the first animation and give the other animation a negative delay to seek to its matching keyframe on mouse-over.

您可以使用 asetInterval来保持第一个动画的动画状态，并给另一个动画一个负延迟，以在鼠标悬停时寻找其匹配的关键帧。

Read about the state-maintaining-interval-thing here, at the "Manipulating CSS Animations" section; read about the negative delay to seek here.

在此处的“操作 CSS 动画”部分阅读有关状态维护间隔的内容；阅读有关此处寻求的负面延迟的信息。

回答by pankleks

on mouse hover:

在鼠标悬停时：

1. remove animation classes from both elements
2. use requestAnimationFrame(() => { ... add here "bounce" class to both elements })

1. 从两个元素中删除动画类
2. 用 requestAnimationFrame(() => { ... add here "bounce" class to both elements })

Should sync nicely.

应该很好地同步。

回答by Moshe Jonathan Gordon Radian

I was looking for an alternative solution to those proposed here because:

我正在寻找这里提出的解决方案的替代解决方案，因为：

1. I am animating a background color - which can't use the positioning magic in the accepted answer.
2. I wanted to avoid calculations for a very simple animation in my app.

1. 我正在为背景颜色设置动画 - 在接受的答案中不能使用定位魔法。
2. 我想避免在我的应用程序中计算一个非常简单的动画。

After further research I came across this moduleby bealearts.

经过进一步研究，我发现了bealearts 的这个模块。

It exposes a very neat API that lets you keep an animation in sync across the app by referring to it's name:

它公开了一个非常简洁的 API，让您可以通过引用它的名称来使动画在整个应用程序中保持同步：

import sync from 'css-animation-sync';
sync('spinner');

Since this seemed a little too good to be true, I tested the library (which is a single short file) in this fiddle and am happy to report it works(hover on the third image and see that I quickly syncs to the second image's animation) :).

由于这似乎有点好得令人难以置信，我在这个小提琴中测试了库（这是一个短文件），很高兴报告它有效（将鼠标悬停在第三张图片上，看到我快速同步到第二张图片的动画) :)

Credit: I used the animation from this fiddleby Simurai as a basis for my fiddle.

信用：我使用Simurai 的这个小提琴的动画作为我的小提琴的基础。

If anyone wants to replicate the mechanism behind this synchronisation, the code is open, but in it's essence, it uses events listeners for the animation itself as sync points:

如果有人想复制这种同步背后的机制，代码是开放的，但本质上，它使用动画本身的事件侦听器作为同步点：

window.addEventListener('animationstart', animationStart, true);
window.addEventListener('animationiteration', animationIteration, true);

Hope this helps the next person looking for a solution to this problem.

希望这有助于下一个人寻找解决此问题的方法。