同步 CSS 关键帧颜色动画答案

【问题标题】：Sync CSS keyframe color animations同步 CSS 关键帧颜色动画
【发布时间】：2013-07-17 06:34:40
【问题描述】：

假设我有三个高度未知的 div，其中一个具有使用 CSS 关键帧动画的动画背景颜色（请参阅 http://css-tricks.com/color-animate-any-shape-2）

@-webkit-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}
@-moz-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}

现在，还有另外两个具有白色背景的 div。在悬停时，我希望那些白色 div 也具有与永久颜色动画同步的动画背景颜色。我知道不支持原生同步（请参阅How To Sync CSS Animations Across Multiple Elements?）。

我的第一种方法是让三个 div 都具有动画背景颜色，并用白色 div 覆盖其中两个，相对定位。在悬停时，这些白色 div 会变成透明并显示带有动画背景的 div（请参阅http://jsfiddle.net/Vzq4B）

#permanent {
    height: 100px;
    margin-bottom: 15px;
    width: 100%;
    -webkit-animation: super-rainbow 5s infinite linear; 
       -moz-animation: super-rainbow 5s infinite linear;
}
#hover {
    position: relative;
    top: -115px;
    margin-bottom: -100px;
    height: 100px;
    width: 100%;
    background: #fff;
}
#hover:hover {
    background-color: transparent;
}

但是，这种方法只有在我知道我的元素的高度时才有效，我不知道，因为内容是可变的。

对于未知高度的div，还有哪些其他方法可以实现这种效果？

【问题讨论】：

标签： css css-animations

【解决方案1】：

尝试将您的 DIV 放在运行动画的父容器中。然后子容器可以容纳内容并具有白色背景，在悬停时使用 CSS 变为透明。

HTML：

<div id="container">
   <div id="child">Your content.</div>
</div>

CSS：

#container { animation: super-rainbow 5s infinite linear; }
#child {background-color: white;}
#child:hover {background-color: transparent;}

这是一个小提琴http://jsfiddle.net/bejnar/Vzq4B/4/

【讨论】：

【解决方案2】：

你为什么不试试这个：

#hover:hover {
     height: auto;
    width: 100%;
    outline: 1px solid #999; /* only style */
    -webkit-animation: super-rainbow 5s infinite linear; 
       -moz-animation: super-rainbow 5s infinite linear;
    cursor: pointer;
}

有一个链接：http://jsfiddle.net/nmL9s/ 谢谢...

【讨论】：

谢谢，Ata，这是我的第一个方法，但是悬停动画和永久动画不同步。也许我在我的问题中对此不够清楚，我现在更新了。