css3 validation error for keyframes

Question

I having an issue that while using @keyframes in css and checking that in css3 validation it was showing the error "Sorry, the at-rule @-webkit-keyframes is not implemented" like this. I think whether i need to add pre declaration like the css . Because i am new to create an animation using keyframes. Could anyone please provide me the details?

My code is,

@-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);}
}

That's not a validation **error** it's an advisory and safely ignored. Remember, if your site **works** validation is basically irrelevant. — Paulie_D, Apr 08 '14 at 13:57
possible duplicate of [How to validate vendor prefixes in CSS like -webkit- and -moz-?](http://stackoverflow.com/questions/1889724/how-to-validate-vendor-prefixes-in-css-like-webkit-and-moz) — Jukka K. Korpela, Apr 08 '14 at 14:18

score 1 · Answer 1 · answered Apr 08 '14 at 14:13

Vendor-specific prefixes are not part of W3C specifications. This is why @keyframes is valid but @-moz-keyframes and @-webkit-keyframes are not.

In this case it is safe to ignore these warnings but generally speaking, validators are pretty useful when developing cross-browser applications.

It may be helpful for you to use a CSS extension language such as SASS or LESS (if you're not using it already) that, with the help of some frameworks, can handle vendor prefixes for you.

css3 validation error for keyframes

1 Answers1