如何在CSS上延遲動畫？我試過動畫延遲。不起作用

Question

我已經在CSS中創建了非常好的幻燈片，但我希望它們能夠一個接一個地顯示。例如，我在下面有這個動畫，不管我使用animation-delay參數有多高，它都不起作用。我需要這個作爲第二張幻燈片。它必須在第一個30秒後出現。

.slideInLeft2 { /* do slide 2*/ 
    -webkit-animation-name: slideInLeft2; 
    animation-name: slideInLeft2; 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    -webkit-animation-delay: 111s; 
    -moz-animation: fadein 3s ease-in; /* Firefox */ 
    -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */ 
    -o-animation: fadein 3s ease-in; /* Opera */ 
    animation: fadein 3s ease-in-out; 
    } 
    animation-delay: 11s; 
    animation-fill-mode: both; 
    } 
    @-webkit-keyframes slideInLeft2 { 
    0% { 
    -webkit-transform: translateX(-100%); 
    transform: translateX(-100%); 
    visibility: visible; 
    } 
    100% { 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 
    } 
    @keyframes slideInLeft2 { 
    0% { 
    -webkit-transform: translateX(-400%); 
    transform: translateX(-400%); 
    visibility: visible; 
    } 
    100% { 
    -webkit-transform: translateX(0); 
    } 
    { 
    transform: translateX(0); 
} 
    } 

Answer 1

我認爲這是一個錯字，你把它設置至111秒，7號線...

-webkit-animation-delay: 111s; 

它應該是 -

-webkit-animation-delay: 11s; 

Answer 2

嘗試使用JavaScript有很多教程在w3schools。這裏是一個鏈接到該網站：https://www.w3schools.com/js/js_timing.asp

Answer 3

你重寫你的代碼

animation: fadein 3s ease-in-out; 

你應該把延遲這部分太像這樣：

animation: fadein 3s ease-in-out 111s;