我想要一個div從左到右滑動css3關鍵幀動畫。我做錯了什麼？

Question

我有一個div。讓我們說#logo，並且我希望它在加載延遲3秒鐘時以及從輕微動畫（如緩出）顯示時從左到右。我添加動畫：

#logo { 
opacity: 0; 
-webkit-animation-name: fromLeft, fadeIn; 
-webkit-animation-duration: 3s; 
-webkit-animation-iteration-count: 1;   
-webkit-animation-direction: alternate; /* normal, alternate */ 
-webkit-animation-timing-function: ease-out; /* ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) */ 
-webkit-animation-fill-mode: forwards; /* forwards, backwards, both, none */ 
-webkit-animation-delay: 3s; 

-moz-animation-name: fromLeft, fadeIn; 
-moz-animation-duration: 3s; 
-moz-animation-iteration-count: 1;   
-moz-animation-direction: alternate; /* normal, alternate */ 
-moz-animation-timing-function: ease-out; /* ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) */ 
-moz-animation-fill-mode: forwards; /* forwards, backwards, both, none */ 
-moz-animation-delay: 3s; 

-o-animation-name: fromLeft, fadeIn; 
-o-animation-duration: 3s; 
-o-animation-iteration-count: 1;   
-o-animation-direction: alternate; /* normal, alternate */ 
-o-animation-timing-function: ease-out; /* ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) */ 
-o-animation-fill-mode: forwards; /* forwards, backwards, both, none */ 
-o-animation-delay: 3s; 

-ms-animation-name: fromLeft, fadeIn; 
-ms-animation-duration: 3s; 
-ms-animation-iteration-count: 1;   
-ms-animation-direction: alternate; /* normal, alternate */ 
-ms-animation-timing-function: ease-out; /* ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) */ 
-ms-animation-fill-mode: forwards; /* forwards, backwards, both, none */ 
-ms-animation-delay: 3s; 

    animation-name: fromLeft, fadeIn; 
    animation-duration: 3s; 
    animation-iteration-count: 1;   
    animation-direction: alternate; /* normal, alternate */ 
    animation-timing-function: ease-out; /* ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) */ 
    animation-fill-mode: forwards; /* forwards, backwards, both, none */ 
    animation-delay: 3s; 
} 


@-webkit-keyframes fromLeft { 
    0% { left: 0px; } 
    50% { left: 20px; } 
    100% { left: 50px; } 
} 
@-moz-keyframes fromLeft { 
    0% { left: 0px; } 
    50% { left: 20px; } 
    100% { left: 50px; } 
} 
@-ms-keyframes fromLeft { 
    0% { left: 0px; } 
    50% { left: 20px; } 
    100% { left: 50px; } 
} 
@-o-keyframes fromLeft { 
    0% { left: 0px; } 
    50% { left: 20px; } 
    100% { left: 50px; } 
} 


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 

FadeIn適用於mozilla，但FromLeft不適用。

Answer 1

這部作品的jsfiddle

<div id="logo" style="position:absolute">LOGOTEXT</div> 

http://jsfiddle.net/nG5zb/4/

這種精細只能在Chrome和其他WebKit瀏覽器的工作，雖然。如果使用firefox，動畫語法必須以-moz-開頭，而不是-webkit-