@-webkit-keyframes{} CSS règle

Définition de la CSS @-webkit-keyframes{}.

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

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

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

@-webkit-keyframes identifiant{ 
  ...
}

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

@-webkit-keyframes identifiant{ 
  identifiantCle {...}
  identifiantCle {...} 
}
//Avec vrais valeurs
@-webkit-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, équivalent à 0%.
• to, dernière image clé de l'animation, équivalent à 100%.
• pourcentage, nombre survit de l'unité "%" et compris entre 0 et 100. 100 représente la durée totale de l'animation donc 50 représente la moitié de l'animation.

Exemple de code @-webkit-keyframes{} CSS

Conditions d'application de la CSS @-webkit-keyframes{}.

La règle d'Animation CSS @-webkit-keyframes est utilisée si vous devez faire plusieurs séquences d'animation CSS

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

La règle d'Animation CSS @-webkit-keyframes pose des problèmes d'interprétation, n'est reconnue que par Safari 4+ et Chrome.
La règle d'Animation CSS @-webkit-keyframes CSS ignore important (07-2015).