样式表中的 CSS3 关键帧

Question

我在 richard bradshaw 找到了一个关于 css3 transitions 的很好的教程，可以在 http://css3.bradshawenterprises.com/cfimg/

我正在尝试使用具有 3 个图像转换的 div 设置我的母版页 (ASP.Net 4)Visual Studio 2010 根本不喜欢以下关键帧指令，为什么？我设置为 html5 和 css3。

@-webkit-keyframes cf3FadeInOut {
 0% {
   opacity:1;
 }
25% {
    opacity:1;
}
75% {
    opacity:0;
}
 100% {
   opacity:0;
 }
}

@-moz-keyframes cf3FadeInOut {
 0% {
   opacity:1;
 }
25% {
    opacity:1;
}
75% {
    opacity:0;
}
 100% {
   opacity:0;
 }
}

这是动画代码；

.logotransitions img.top {
       -webkit-animation-name: cf3FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 18s;
    -webkit-animation-direction: alternate;

    -moz-animation-name: cf3FadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 18s;
    -moz-animation-direction: alternate;
}

Answer 1

那些只是动画定义...您仍然需要声明您的目标元素使用该动画:

div {
    -webkit-animation : cf3FadeInOut 1s ease infinite;
    -moz-animation : cf3FadeInOut 1s ease infinite;
    animation : cf3FadeInOut 1s ease infinite;
}

顺便说一句，除非你只针对 webkit 和 mozilla 浏览器，否则你应该更新你的代码(定义和声明)以包括所有浏览器供应商:

div {
    -webkit-animation : cf3FadeInOut 1s ease infinite; /*webkit*/
    -o-animation : cf3FadeInOut 1s ease infinite; /*opera*/
    -moz-animation : cf3FadeInOut 1s ease infinite; /*mozzila*/
    -ms-animation : cf3FadeInOut 1s ease infinite; /*ie*/
    animation : cf3FadeInOut 1s ease infinite; /*no vendor*/
}

/*...*/
@-o-keyframes cf3FadeInOut {/*...*/}
/* ... and so on*/