CSS動畫和溢出：隱藏;

我正試圖用兩個動畫元素，前景對象和背景創建動畫。我讓它們都包含在一個div中，並且想要隱藏超出容器div的前景元素溢出，但overflow:hidden;未按預期工作。這只是不適用於動畫？CSS動畫和溢出：隱藏;

見這裏 - >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 and 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);} 
}

來源

2013-08-22 Brad

沒關係！我的z-index正在把它扔出去。我知道這很簡單，我錯過了。

來源

2013-08-22 23:06:55 Brad

CSS動畫和溢出：隱藏;

回答

相關問題