Question

I found a nice tutorial on css3 transitions by richard bradshaw which can be found at
http://css3.bradshawenterprises.com/cfimg/

I am trying to set up my Master Page (ASP.Net 4) with a div that has 3 images transitioning
Visual Studio 2010 doesn’t like the following keyframes directives AT ALL why? I am set on html5 and 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;
 }
}

Here is the animation code;

.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

Those are just the animation definitions… you still need to declare that your targeted elements use that animation :

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

By the way, unless you’re targeting only webkit & mozilla browsers, you should update your code (definitions & declarations) to include all the browser vendors :

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*/