關鍵幀動畫圖像分層

Question

我想讓一個圖像進入另一個圖像的後面。是否有可能使用z-index/opacity來實現這一點？以下是我所指的代碼。我正在使用background-position屬性將事物移入視圖中。

@-webkit-keyframes bannerAnimation { 
0% { 
background-position-x: 
    -240px, 
    -160px, 
    -240px, 
    0; 
} 
50% { 
background-position-x: 
    -240px, 
    -45px, 
    -140px, 
    0; 
} 
100% { 
background-position-x: 
    117px, 
    -65px, 
    117px, 
    0; 
} 
0%, 48% { 
background-position-y: 
-4000px, 
    0px, 
    480px, 
    0px; 
} 
50%, 100% { 
background-position-y: 
    14px, 
    0px, 
    43px, 
    0px; 
} 
    0% { 
opacity: 
    0, 
    1, 
    0, 
    1; 
} 
50% { 
opacity: 
    0, 
    1, 
    0, 
    1; 
} 
100% { 
opacity: 
    1, 
    1, 
    1, 
    1; 
} 
} 



#banner a#main .content { 
background-image: 
    url('../images/95x27_headline_2x.png'), 
    url('../images/155x50_stephen_2x.png'), 
    url('../images/41x4_copy_2x.png'), 
    url('../images/320x50_bg_2x.png'); 
background-size: 
    95px 27px, 
    155px 50px, 
    41px 4px, 
    320px 50px; 
background-position-y: 
    50px, 
    0px, 
    50px, 
    0px; 

-webkit-animation: bannerAnimation 6s ease forwards; 

Answer 1

實現你正在嘗試做的我會建議使用單獨的div來分隔圖像。

然後嘗試動畫化z索引本身，而不是動畫背景位置。

@keyframes move { 
    from { z-index: 0; transform: scale(1); } 
    to { z-index: 4; transform: scale(2.5); } 
} 

檢查出codepen.io這個例子，讓你在正確的方向:)