CSS動畫計時問題

我的整個代碼如下所示：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圖像，它從第二個圖像回到第一個圖像需要很長的時間。

來源

2013-12-13 user2184718

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

來源

2013-12-13 20:38:46

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

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

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

CSS動畫計時問題

回答

相關問題