同步CSS關鍵幀彩色動畫

Question

假設我有未知高度其中一個具有使用CSS關鍵幀動畫動畫背景顏色的三個div的（見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實現此效果？

Answer 1

試着將你的資料覈實其運行動畫父容器內。子容器然後可以容納內容並具有白色背景，在懸停時使用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/

Answer 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/ 謝謝...