Firefox는 슬라이드 애니메이션을 무시합니다

Question

저는 크롬에서 예상대로 작동하는 종류의 슬라이더를 만들었습니다. 그러나 Firefox의 절반 만 작동합니다.

두 가지 애니메이션이 포함되어 있으며, 페이드 인 효과와 슬라이드 인 효과가 있습니다. Firefox에서만 fadein 효과가 표시됩니다.

HTML

<div class="container"> 
    <img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" /> 
    <img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" /> 
</div> 

CSS

body{background:#202133;} 
.container{ 
    margin:50px auto; 
    width:700px; 
    height:485px; 
    overflow:hidden; 
    position:relative; 
} 
.container img{ 
    width:700px; 
    height:485px; 
} 
.photo{ 
    position:absolute; 
    animation:round 6s infinite; 
    opacity:1; 
} 
@keyframes round{ 
    0%{ 
    left: -1000px;opacity:0.5;z-index:1000; 
    } 
    50%{ 
    left: 0px; opacity:1; 
    } 
} 
@-webkit-keyframes round{ 
    0%{ 
    left: -1000px;opacity:0.5;z-index:1000; 
    } 
    50%{ 
    left: 0px; opacity:1; 
    } 
} 
img:nth-child(2){animation-delay:0s;} 
img:nth-child(1){animation-delay:3s;} 

어떤 생각을 왜?

Codepen Link

Answer 1

은 photo 클래스의 왼쪽 값을 초기화 : 또한

.photo{ 
    position:absolute; 
    animation:round 6s infinite; 
    opacity:1; 
    left: 0px; 
    z-index: 0; 
} 

codepen

, 당신은 모든 공급 업체 접두사를 사용해야합니다,뿐만 아니라 -webkit!