Ik ben bezig geweest met het experimenteren van animerende paginaelementen door gebruik te maken van animated gifs in combinate met de css :hover, als eerste instantie heb ik gekozen om geen javascript te willen gebruiken voor zoiets simpels.
Theorie: wanneer met de muis de :hover state getriggered wordt, wordt de animatie gestart zodat je bijvoorbeeld een fade-in effect kan gebruiken. (met gebruik van een gif die NIET looped)
Echter de praktijk is dat dit per browser verschilt.
In Internet Explorer wordt elke keer dat de :hover state getriggerd wordt, de animated gif gereset naar frame 0 (dus een fade in werkt altijd) en afgespeeld.
In Firfox wordt de eerste keer dat de :hover state getriggerd wordt, de animated gif gestart, elke volgende keer krijg je alleen de laatste frame te zien.
In Opera wordt de eerste keer dat de :hover state getriggerd wordt, de laatste frame van de animatie getoond, elke volgende keer wordt de animatie gereset naar frame 0 en afgespeeld.
De CSS specificatie zegt het volgende (5.11.3):
Zie: http://www.s82.nl/temp/anihover/default.html
Theorie: wanneer met de muis de :hover state getriggered wordt, wordt de animatie gestart zodat je bijvoorbeeld een fade-in effect kan gebruiken. (met gebruik van een gif die NIET looped)
Echter de praktijk is dat dit per browser verschilt.
In Internet Explorer wordt elke keer dat de :hover state getriggerd wordt, de animated gif gereset naar frame 0 (dus een fade in werkt altijd) en afgespeeld.
In Firfox wordt de eerste keer dat de :hover state getriggerd wordt, de animated gif gestart, elke volgende keer krijg je alleen de laatste frame te zien.
In Opera wordt de eerste keer dat de :hover state getriggerd wordt, de laatste frame van de animatie getoond, elke volgende keer wordt de animatie gereset naar frame 0 en afgespeeld.
De CSS specificatie zegt het volgende (5.11.3):
Echter ik vroeg me af of hier over geschreven is en wat logisch gezien de juiste keuze zou zijn.CSS doesn't define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements.
Zie: http://www.s82.nl/temp/anihover/default.html
[ Voor 5% gewijzigd door Justice op 26-05-2005 13:00 ]
Human Bobby