When I use the W3C CSS validator, I get this error:
at-rule @-webkit-keyframes is not implemented
My CSS looks like this:
.sample{
width:20%;
float:left;
clear:none;
margin:0 3.6% 3.5% 0;
}
.samplebottom{
width:100%;
float:left;
height:65px;
}
.samplebottom h3{
float:right;
clear:both;
margin:5px 0 0 0;
color:#000;
font:15px "B Nazanin";
font-weight:bold ;
}
.sampa{
float:right;
width:100%;
clear:both;
color:#999 !important;
font:13px arial;
}
.tpl6 .bg{
height:100%;
width:100%;
background:url(../images/bg13.png) repeat;
text-align:center;
border-radius:5px;
}
.tpl6 .bg img {
width:20%;
float:right;
margin:68% 40% 0 0;
}
.he-wrap{
position:relative;
display:inline-block;
}
.he-view,.he-zoom{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
visibility:hidden
}
.he-view-show{
visibility:visible
}
.a0{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:.6s;
-moz-animation-duration:.6s;
-ms-animation-duration:.6s;
-o-animation-duration:.6s;
animation-duration:.6s
}
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.fadeIn{
-webkit-animation-name:fadeIn;
-moz-animation-name:fadeIn;
-o-animation-name:fadeIn;
animation-name:fadeIn
}
and the error is about these codes :
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
How can I correct the validation error?
