イメージCSSキーフレームアニメーションで繰り返す

Question

私のアニメーションでは、現在、最初のイメージrt1が、最後のイメージrt3がビューに回転している間に、少しだけ透過的にビューに点滅してから再び表示されるという問題が発生していますrt3が見えるようになった直後。これはなぜですか、これをやめるために何ができますか？私はアニメーションシーケンスのためにイメージを適切に重ねると信じていました。

私も注意しましょう。これはサファリでのみ発生します。これをChromeで実行しようとするとうまく描画されます。

/* --------------------------------------------------- 
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;