keyframe animation image layering

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

Чтобы достичь того, что вы пытаетесь сделать, я бы предложил использовать отдельные разделители для отдельных изображений.

Затем вместо анимации background-position попробуйте анимацию самого z-индекса.

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

Заканчивать этот пример на codepen.io, чтобы вы начали в правильном направлении :)