i'm trying create animation 2 animated elements, foreground object , background. have them both contained in div , want hide overflow of foreground element beyond container div, overflow:hidden; isn't working expected. not work on animations?
see here --> http://verybradthings.com/chopper/index.html
html
<div class="container"> <div class="scene-container"> <img src="img/chopper.svg" id="chopper"/> <div id="skyline"></div> </div> </div> css
.container{ display: block; width: 600px; margin: 0 auto; } .scene-container{ display: inline-block; height: 175px; width: 231px; overflow: hidden; } #chopper{ display: inline-block; position: absolute; z-index: 1; -webkit-animation: chopper-scale 3s infinite linear; } #skyline{ display: inline-block; height: 174px; width: 230px; outline: 1px blue solid; background: url(img/skyline.svg); background-repeat: repeat-x; -webkit-animation: move 5s infinite linear, scale 5s infinite ease; } /*skyline scale , move*/ @-webkit-keyframes scale{ 0% {-webkit-transform:scale(1);} 50% {-webkit-transform:scale(1.5);} 100% {-webkit-transform:scale(1);} } @-webkit-keyframes move{ 0% {background-position: 0 0;} 50% {background-position: 115px 0;} 100% {background-position: 230px 0;} } /* chopper scale */ @-webkit-keyframes chopper-scale{ 0% {-webkit-transform:scale(1);} 50% {-webkit-transform:scale(1.5);} 100% {-webkit-transform:scale(1);} }
nevermind! z-index throwing out of whack. knew simple missing.
