10-04-2013, 06:21 PM
Les préfixes sont là car les navigateurs n'ont pas implémenté les règles telles que définies par la norme CSS3 (pour plusieurs raisons: règles normées trop compliquées ou règles non encore officielles sont les principales, c'est pour cela que -moz-* est souvent utilisable avant que la règle *, issue de la norme, ne le soit).
Les navigateurs qui comprennent la règle sans préfixe ignorent (je crois) la règle préfixée (ou, en tous cas, la règle préfixée devient obsolète). Utiliser la règle non préfixée + l'ensemble des règles préfixées permet d'élargir la gamme de navigateurs compatibles. Après, oui, ca alourdis le code, mais je pense (j'espère, sinon, il faudrait y remédier) qu'il existe des outils sur le web qui ajouteraient l'ensemble des préfixes aux règles qui les requièrent (c'est à dire un genre de script PHP qui prendrait, en entrée, un CSS sans préfixe et qui sortirait un CSS avec toutes les règles préfixables qui seraient préfixées).
Keyframes permet de faire changer les règles CSS au fil du temps, c'est donc une méthode d'animation. Mais il suffit d'appliquer une règle de type "transition" à un objet DOM, et de changer, dans le CSS, sa position (par exemple, avec le pseudo-sélecteur ":hover") pour qu'il y ait une animation de translation de la valeur de départ de l'objet, jusqu'à la nouvelle valeur spécifée.
En d'autres mots, l'animation @keyframes permet de faire une animation au sens strict, qui se répète ou non, qui dure plus ou moins longtemps, mais surtout, qui se déroule sans lien avec les évènements hover ou click ou autres de la page. En revanche, grâce à ces évènements (via javascript ou via les pseudo-sélections CSS ":*"), on peut modifier une valeur de style d'un objet, et si une durée de transition (via la règle "transition") est définie, alors il y aura un effet "animé", au sens strict, un effet de "transition" (mais une transition, en un sens, est une animation, simple).
Les navigateurs qui comprennent la règle sans préfixe ignorent (je crois) la règle préfixée (ou, en tous cas, la règle préfixée devient obsolète). Utiliser la règle non préfixée + l'ensemble des règles préfixées permet d'élargir la gamme de navigateurs compatibles. Après, oui, ca alourdis le code, mais je pense (j'espère, sinon, il faudrait y remédier) qu'il existe des outils sur le web qui ajouteraient l'ensemble des préfixes aux règles qui les requièrent (c'est à dire un genre de script PHP qui prendrait, en entrée, un CSS sans préfixe et qui sortirait un CSS avec toutes les règles préfixables qui seraient préfixées).
Keyframes permet de faire changer les règles CSS au fil du temps, c'est donc une méthode d'animation. Mais il suffit d'appliquer une règle de type "transition" à un objet DOM, et de changer, dans le CSS, sa position (par exemple, avec le pseudo-sélecteur ":hover") pour qu'il y ait une animation de translation de la valeur de départ de l'objet, jusqu'à la nouvelle valeur spécifée.
En d'autres mots, l'animation @keyframes permet de faire une animation au sens strict, qui se répète ou non, qui dure plus ou moins longtemps, mais surtout, qui se déroule sans lien avec les évènements hover ou click ou autres de la page. En revanche, grâce à ces évènements (via javascript ou via les pseudo-sélections CSS ":*"), on peut modifier une valeur de style d'un objet, et si une durée de transition (via la règle "transition") est définie, alors il y aura un effet "animé", au sens strict, un effet de "transition" (mais une transition, en un sens, est une animation, simple).