How To Sync CSS Animations Across Multiple Elements?

by

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/

More Related Contents:

  1. CSS3 animation with gradients [duplicate]
  2. CSS3 Continuous Rotate Animation (Just like a loading sundial)
  3. How to create a pulse effect using -webkit-animation – outward rings
  4. How to make moving CSS objects like this?
  5. How to have multiple CSS transitions on an element?
  6. iPhone WebKit CSS animations cause flicker
  7. css3 animation on :hover; force entire animation
  8. How do I re-trigger a WebKit CSS animation via JavaScript?
  9. CSS Animations with delay for each child element
  10. CSS endless rotation animation
  11. CSS3 Chain Animations
  12. IE10 – CSS animation not working
  13. Change Background Color & Font Color Automatically Via CSS [closed]
  14. Chrome / Safari not filling 100% height of flex parent
  15. How to style HTML5 range input to have different color before and after slider?
  16. Blurry text after using CSS transform: scale(); in Chrome
  17. WebKit: Blurry text with css scale + translate3d
  18. inject CSS to a site with webview in android
  19. CSS Animation onClick
  20. Webkit and jQuery draggable jumping
  21. What is the correct “-moz-appearance” value to hide dropdown arrow of a element
  22. CSS3 property webkit-overflow-scrolling:touch ERROR
  23. Safari/Chrome (Webkit) – Cannot hide iframe vertical scrollbar
  24. matplotlib save animation in gif error
  25. Javafx : How can I produce an animation with 3D path?
  26. rounded corners on html5 video
  27. Animate CSS background-position with smooth results (sub-pixel animation)
  28. WebKit CSS content Unicode bug?
  29. In JavaFX how do I move a sprite across the screen?
  30. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

Leave a Comment