keyframe animation image layering

Question

Ich versuche ein Bild hinter einem anderen in Sicht zu bekommen. Ist es möglich, z-index/opacity dafür zu verwenden? Unten ist der Code, auf den ich mich beziehe. Ich verwende die background-position -Eigenschaft, um Objekte aus der Sicht zu verschieben.

@-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

um zu erreichen, was Sie versuchen zu tun, würde ich vorschlagen separate Divs für separate Bilder zu verwenden.

Dann animieren Sie statt der background-position animieren den Z-Index selbst.

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

Schauen Sie sich dieses Beispiel auf codepen.io Ihnen in die richtige Richtung Einstieg :)