关键帧动画图像分层

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这个例子，让你在正确的方向:)