動畫從左到右和從右到左

Question

我有一個css3動畫的問題; 我有兩個動畫：一個在頂部，一個在底部。 頂部動畫將加載從0寬度爲100％，它的偉大工程，但第二動畫應該從從右到左0到100％的寬度加載和不工作:(有人能解釋我爲什麼？ here is my fiddle exaple:

.left-to-right {animation:myfirst 1s ease;} 
.right-to-left {animation:mysecond 1s ease;} 

@keyframes myfirst { 
    0% {width:0; margin-left:100%;} 
    100% {width: 100%; margin-left: 0;} 
} 
@keyframes mysecond { 
    0% {width:100%; margin-left: 0;} 
    100% {width: 0; margin-left:100%;} 
} 

Answer 1

您在邊緣第二動畫犯了一個錯誤，您可以刪除它們。

DEMO

@keyframes mysecond { 
    0% {width:0;} 
    100% {width: 100%;} 
}