[CSS] Keyframe

[battler]

Ik wil graag een fade tussen twee plaatjes die eindeloos doorlopen. Ik wil alleen gebruik maken van CSS en HTML.

Ik heb een mooie tutorial gevonden, die precies uitlegt wat ik bedoel.
Allereerst moet ik een mouse-over maken wat perfect werkt.de code die ik hiervoor moet gebruiken;

index.html

code:

<div id="cf">
    <img class="bottom" src="afbeeldingen/onder.jpg" />
    <img class="top" src="afbeeldingen/top.jpg" />
</div>

master.css

code:

#cf {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;  
}
#cf img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
    opacity:0;
}

Dit werkt perfect, alleen wil ik graag dat de afbeeldingen elkaar afwisselen zonder een mouse-over. Ook dit staat in de tutorial.

code:

@keyframes cfFadeInOut {
    0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

#cf img.top {
    animation-name: cfFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-direction: alternate;
}

En bij dit laatste gaat het fout. De hele keyframe wordt volgens mij niet aangeroepen. Maar hoe dit komt, weet ik niet. Volgens deze website ondersteunt Firefox keyframes. Ik test de website met Safari, Firefox, Chrome en IE, ik heb niets kunnen vinden dat ik op de webserver nog iets moet instellen (Apache). Ik heb meermaals alles gecontroleerd op code fouten e.d. Ook meerdere tutorials geprobeerd maar alles komt in essentie op hetzelfde neer. Is er iets wat ik kan controleren of is het nog gewoon te vroeg voor deze techniek?

[posttoast]

Werkt het in de tutorial wel bij jou? Hier doet die het prima in Firefox.

[battler]

De fade in de tutorial werk wel gewoon bij mij. Daarom denk ik niet dat het ligt aan de browser. Daarentegen gebruik hij zelf een andere code dan wat hij weergeeft als code. Zijn source heb ik ook geprobeerd om te gebruiken maar dat werkt nog steeds niet.

[Juup]

Zet even een je halfwerkende code online, geef ons een linkje?

[OkkE]

Lijkt gewoon prima te werken, ieder geval in Chrome en Firefox:
http://dabblet.com/gist/1607070 (copy/paste uit dit topic)

[ Voor 12% gewijzigd door OkkE op 13-01-2012 16:52 ]