除Chrome之外的所有瀏覽器都可以使用的CSS3動畫

Question

除Chrome以外的所有瀏覽器都能正常工作。淡入效果似乎可以正常工作，但floatInCommand動畫片斷並使Commend（引導容器）在1秒後鎖定到位。我不知道是否需要添加除「-webkit」以外的任何其他內容。我已經看過類似問題的線程，他們都通過添加「-webkit」來修復它。

.slide-in { 
    -webkit-animation-name: floatInCommend; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */ 
    -moz-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-direction: normal; 
    -webkit-animation-delay: 1.25s; 
} 
@-webkit-keyframes floatInCommend { 
    from { 
     opacity: 0; 
     top: -100%; 
    } 
    to { 
     opacity: 1; 
     top: 75; 
    } 
} 

.slide-in-footer { 
    -webkit-animation-name: floatInFooter; 
    -webkit-animation-duration: 2s; 
    animation-fill-mode: both; 
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */ 
    -moz-animation-fill-mode: both; 
    -webkit-animation-direction: normal; 
    -webkit-animation-delay: 0.5s; 
} 
@-webkit-keyframes floatInFooter { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
} 

.slide-in-nav { 
    -webkit-animation-name: floatInFooter; 
    -webkit-animation-duration: 2s; 
    animation-fill-mode: both; 
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */ 
    -moz-animation-fill-mode: both; 
    -webkit-animation-direction: normal; 
    -webkit-animation-delay: 0.5s; 
} 
@-webkit-keyframes floatInNav { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
} 

Answer 1

同時需要-webkit，-moz和非供應商前綴屬性。考慮使用任務運行器和autoprefixer來確保在發佈代碼之前已經安裝了所有的css供應商前綴。