CSS3動畫延遲問題

Question

我在我的html文件中有三個圖像，我想一次按比例縮放。我試過放置這些延遲：-moz-animation-delay: -2s;和animation-delay:2s;內的ID #animation-container2和#animation-container3。所有圖像仍然在同一時間縮放。我做錯了什麼？

的HTML

<div id="splashPage"> 
    <ul> 
    <li> <img src="images/vintage.png" alt="Vintage" id="animation-container"> <li> 
    <li> <img src="images/computers.png" alt="Computer" id="animation-container2"> <li> 
    <li> <img src="images/online.png" alt="Online" id="animation-container3" > <li> 
    </ul> 
    <img src="images/enter.gif" alt="enter" id="enterClick"> 
    </div> 

的CSS：

#animation-container { 
    animation: inout 2s; 
    animation-iteration-count: 1; 
    -webkit-animation: inout 3s; /* Safari & Chrome */ 
    margin: auto; 
} 
@keyframes inout { 
    25% { transform: scale(2, 2); } 
} 
#animation-container2 { 
    -moz-animation-delay: 5s; 
    animation: inout 2s; 
    animation-iteration-count: 1; 
    -webkit-animation: inout 3s; /* Safari & Chrome */ 
    margin: auto; 
} 
@keyframes inout { 
    25% { transform: scale(2, 2); } 
} 
#animation-container3 { 
    -moz-animation-delay: 10s; 
    animation: inout 2s; 
    animation-iteration-count: 1; 
    -webkit-animation: inout 3s; /* Safari & Chrome */ 
    margin: auto; 
} 
@keyframes inout { 
    25% { transform: scale(2, 2); } 
} 

Answer 1

下面是一些新的和更清潔的CSS，應該工作：

#animation-container { 
    animation: inout 2s 0s 1; 
    -webkit-animation: inout 2s 0s 1; 
    margin: auto; 
} 
#animation-container2 { 
    animation: inout 2s 5s 1; 
    -webkit-animation: inout 2s 5s 1; 
    margin: auto; 
} 
#animation-container3 { 
    animation: inout 2s 10s 1; 
    -webkit-animation: inout 2s 10s 1; 
    margin: auto; 
} 
@keyframes inout { 
    25% { transform: scale(2, 2); } 
} 
@-webkit-keyframes inout { 
    25% { -webkit-transform: scale(2, 2); } 
} 

見fiddle。