Question

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

我正在尝试使用具有3个图像转换的div来设置我的母版页（ASP.Net 4） Visual Studio 2010不喜欢以下关键帧指令AT ALL为什么？我在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＆amp;在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*/

样式表中的CSS3关键帧

1 个答案: