關鍵幀的css3驗證錯誤

我有一個問題，即在css中使用@keyframes，並檢查在css3驗證中，它顯示錯誤"Sorry, the at-rule @-webkit-keyframes is not implemented"像這樣。我想我是否需要添加像CSS這樣的預申報。因爲我是新來創建使用關鍵幀的動畫。任何人都可以提供給我細節？關鍵幀的css3驗證錯誤

我的代碼，

@-webkit-keyframes roll{ 
    0% {-webkit-transform: translateX(500px) rotate(360deg);} 
    100% {-webkit-transform: translateX(0px) rotate(0deg);} 
} 
@-moz-keyframes roll{ 
    0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;} 
    100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;} 
} 
@-o-keyframes roll{ 
    0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;} 
    100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;} 
} 
@-ms-keyframes roll{ 
    0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;} 
    100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;} 
} 
@keyframes roll{ 
    0% {transform: translateX(500px) rotate(360deg); opacity: 0;} 
    100% {transform: translateX(0px) rotate(0deg); opacity: 1;} 
} 
@-webkit-keyframes moveUp{ 
    0% {-webkit-transform: translateY(40px);} 
    100% {-webkit-transform: translateY(0px);} 
} 
@-moz-keyframes moveUp{ 
    0% {-moz-transform: translateY(40px);} 
    100% {-moz-transform: translateY(0px);} 
} 
@-o-keyframes moveUp{ 
    0% {-o-transform: translateY(40px);} 
    100% {-o-transform: translateY(0px);} 
} 
@-ms-keyframes moveUp{ 
    0% {-ms-transform: translateY(40px);} 
    100% {-ms-transform: translateY(0px);} 
} 
@keyframes moveUp{ 
    0% {transform: translateY(40px);} 
    100% {transform: translateY(0px);} 
}

來源

2014-04-08 user2644743

這不是一個驗證**錯誤**這是一個建議，並安全地忽略。請記住，如果您的網站**有效**驗證基本上不相關。 –

[如何驗證CSS中的供應商前綴，如-webkit-和-moz-？]可能的重複（http://stackoverflow.com/questions/1889724/how-to-validate-vendor-prefixes-in-css-like -webkit和 - MOZ） –

供應商特定的前綴不是W3C規範的一部分。這就是爲什麼@keyframes是有效的，但是@ -moz-keyframes和@ -webkit-keyframes不是。

在這種情況下，忽略這些警告是安全的，但一般來說，驗證器在開發跨瀏覽器應用程序時非常有用。

這可能有助於您使用CSS擴展語言如SASS或LESS（如果你不使用它的話），與一些框架的幫助下，可以處理供應商前綴爲您服務。

來源

2014-04-08 14:13:30 goldins

關鍵幀的css3驗證錯誤

回答

相關問題