css3 validation error for keyframes - css

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

Answer 1

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.