2013-12-13 75 views
0

我的整個代碼如下所示:CSS動畫計時問題

.inner .css-img { 
    max-width: 100%; 
    position: absolute; 
    left: 0; 
    right: 0; 
    opacity: 0; 
    -webkit-animation: css-carousel-fade 10s linear infinite; 
    -moz-animation: css-carousel-fade 10s linear infinite; 
    -ms-animation: css-carousel-fade 10s linear infinite; 
    animation: css-carousel-fade 10s linear infinite; 
} 

.inner .css-img:nth-child(2) { 
    -webkit-animation-delay: 5s; 
    -moz-animation-delay: 5s; 
    -ms-animation-delay: 5s; 
    animation-delay: 5s; 
} 

@keyframes css-carousel-fade { 
    0%, 50%, 100% { opacity: 0; } 
    10%, 50% { opacity: 1;} 
} 

現在發生的事情是,像一和二之間的轉換工作創造,但它花費的時間太長所以顯示第1圖像,它從第二個圖像回到第一個圖像需要很長的時間。

回答

0

不透明度是什麼動畫。 %告訴你整個動畫的哪部分處理該部分。因此,從0-45開始,您的不透明度爲1,然後從45-90淡入淡出,然後從90-100淡出,然後在動畫重新開始時再次回到1。

+0

好吧。當我將代碼更改爲上面編輯的內容時,我在圖像1和圖像2之間進行了正確的轉換,而不是兩個轉換回到一個。 – user2184718

+0

你想淡入1嗎?如果是這樣,那麼將附加到不透明度1的0%更改爲15%或20%。 –

+0

加入15%看起來非常適合在第一和第二之間轉換。從2回到1的過渡仍然過長。似乎需要很長時間才能顯示第一張圖片,然後從第二張圖片轉移回第一張圖片。 – user2184718