0

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

我正在尝试设置我的母版页（ASP.Net 4），其中包含 3 个图像转换的 div，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;
}
4

1 回答 1

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*/
于 2012-08-25T15:19:41.223 回答