키 프레임 애니메이션 이미지 겹침

Question

하나의 이미지를 다른 이미지 뒤에 보이게하려고합니다. Z- 색인/불투명도를 사용하여이를 수행 할 수 있습니까? 아래는 내가 언급 한 코드입니다. 배경 - 위치 속성을 사용하여 사물을 안쪽으로 이동합니다.

@-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- 인덱스 자체에 애니메이션을 적용 해보십시오. `대신 Z-index``의 그 어떤 원인이되지 않기 때문에, translateZ를 (N) : codepen.io에이 예

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

체크 아웃은 당신이 올바른 방향 :

이