@keyframes{} CSS règle

Définition de la CSS @keyframes{}.

La règle d'Animation CSS @keyframes permet spécifier les images clés d'une animation CSS.

@keyframes identifiant{ 
  from {width: 300px}
  to {width: 100px;}
}

La règle d'Animation CSS @keyframes CSS est toujours suivit d'un nom qui sera utilisé comme identifiant par la propriété d'Animation CSS animation-name.

@keyframes identifiant{ 
  ...
}

La règle d'Animation CSS @keyframes est composée d'au moins deux ou plusieurs images clés.

@keyframes identifiant{ 
  identifiantCle {...}
  identifiantCle {...} 
}
//Avec vrais valeurs
@keyframes identifiant{ 
  from {...} /* identique à 0% {...}*/
  50% {...} /* image clé intermédiaire */
  90% {...} /* image clé intermédiaire */
  to{...}  /* identique à 100% {...}*/
}

L'identifiant de la clé CSS peut prendre les valeurs suivantes :

• from, première image clé de l'animation CSS, équivalent à 0%.
• to, dernière image clé de l'animation CSS, équivalent à 100%.
• pourcentage, nombre survit de l'unité "%" et compris entre 0 et 100. 100 représente la durée totale de l'animation spécifier par la propriété d'Animation CSS animation-duration; donc 50 représente la moitié de l'animation CSS.

Exemple de code @keyframes{} CSS

Problème d'interprétation de @keyframes{} en Css.

La règle d'Animation CSS @keyframes pose des problèmes d'interprétation, n'est pas reconnue par Internet Explorer < 10 et Firefox < 19 et Opera < 12.1.