Sync CSS keyframe color animations
css, css-animations
Solution
Try placing your DIVs inside parent containers which run the animation. Child containers can then hold content and have a white background, which turns transparent using CSS on hover.
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;}
Here’s a Fiddle http://jsfiddle.net/bejnar/Vzq4B/4/
Problem
Assuming I have three divs of unknown height of which one has an animated background color using a CSS keyframe animation (see 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; } } ``` Now, there are two other divs that have a white background. On hover I want those white divs to have an animated background color as well that is in sync with the permanent color animation. I am aware that a native sync isn’t supported (see How To Sync CSS Animations Across Multiple Elements?). My first approach would be to have three divs that all have animated background colors and cover two of them with white divs, positioned relative. On hover those white divs would then turn transparent and reveal the divs with the animated background (see 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; } ``` However, this approach will only work if I know the height of my elements, which I don’t since the content is variable. Which other ways are there to achieve this effect for divs of unknown height?