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

问题描述

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

我的问题是:无论第二个元素的动画何时开始，是否可以同步(让两个元素同时到达顶点等)跨两个元素的动画?

这是我的 HTML:

<div id="bouncy01">滴水</div><div id="bouncy02">droP</div>

和我的 CSS:

@-webkit-keyframes 反弹 {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 {边距:10px；向左飘浮;背景:#ff0000；填充:10px；边框:1px 实心 #777；}#bouncy01 {-webkit-animation:bounce 0.25s 缓入缓出无限交替；}#bouncy02 {背景:#ffff00；}#bouncy02:悬停{-webkit-animation:bounce 0.25s 缓入缓出无限交替；}

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

(要查看问题，将鼠标悬停在黄色块上)

解决方案

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

html:

<div id="bouncy01">滴水</div><div id="bouncy02">droP</div><div>

CSS:

@-webkit-keyframes 反弹 {0% { padding-top:1px;}/* 使用填充，因为它不影响位置:相对于子链接* 使用 0 而不是 0 b/c 的盒模型问题，* 对于有保证金的孩子，但对于没有保证金的父母，请尝试一下*/50% { padding-top:5px;}/*所需值+1*/100% { padding-top:1px;}}#bouncy01，#bouncy02 {边距:10px；背景:#ff0000；填充:10px；边框:1px 实心 #777；宽度:30px；位置:绝对；}#bouncywrap {-webkit-animation:bounce 0.125s 缓入出无限；位置:相对；宽度:140px；高度:50px；/* 背景:灰色；/*调试*/}#bouncy02 {背景:#ffff00；左:60px；顶部:2px；/*所需值的一半，只是对光学元件的修复*/}#bouncy02:悬停{位置:相对；/*这里发生了魔法*/顶部:0px;}

演示 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 动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！