이미지 CSS 키 프레임 애니메이션 반복

Question

내 애니메이션에서 현재 내 첫 이미지 인 rt1이 내 마지막 이미지 인 rt3이보기로 회전하고 다시 시작될 때까지보기에 약간 투명하게 깜박 거리는 문제가 발생합니다. rt3 직후에 볼 수 있습니다. 왜 이런 일이 일어나고 이런 일이 일어나지 않게하려면 어떻게해야합니까? 내 애니메이션 시퀀스에 맞게 이미지를 제대로 쌓았다고 생각했습니다.

나는 사파리에서만 발생합니다. 크롬에서 이것을 실행하면 잘 렌더링됩니다.

/* --------------------------------------------------- 
Banner 
--------------------------------------------------- */ 
#banner a#main { 
background-image: 
    url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt1.png'), 
    url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt2.png'), 
    url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt3.png'); 
background-size: contain; 
color: #E1E0DC; 
} 

#banner a#main .content { 
-webkit-animation: bannerRotation 12s cubic-bezier(1, 0, 0.7, 0) forwards; 
background-image: 
    url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt1.png'), 
    url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt2.png'), 
    url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt3.png'); 
background-size: contain; 
} 


@-webkit-keyframes bannerRotation { 
    0% { 
    background-image: 
     url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt1.png'); 
    } 33.3%, 66.6% { 
    background-image: 
     url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt2.png'); 
    } 66.6%, 100% { 
    background-image: 
     url('../images/Animation-rotations/Beer/320x50/320x50_2x_rt3.png'); 
    } 
} 

Answer 1

사용 background-repeat: no-repeat;