animation CSS propriété

.mon-animation{
  animation : une-animation 5s ease-out 0s infinite normal none;
}
@keyframes une-animation{ ...}

Propriétés CSS utilisées dans le raccourci animation.

Spécifier les propriétés CSS d'animation individuellement

Si vous ne voulez pas utiliser le raccourci animation, vous pouvez définir individuellement chaque propriété d'animation en utilisant une des propriétés CSS suivante :

• animation-name : définie l'identifant de l'animation CSS à jouer.
• animation-timing-function : définie l'effet sur la progression de l'animation CSS.
• animation-iteration-count : définie le nombre de répétition de l'animation CSS.
• animation-direction : définie le sens de lecture (from, to)de l'animation CSS définie dans @keyframes.
• animation-fill-mode : définie à quel moment de l'animation CSS les effets sont visibles.
• animation-play-state : définie si l'animation CSS est en pause ou pas.
• animation-delay : définie la durée de la pause avant de jouer l'animation CSS.
• animation-duration : définie la durée de l'animation CSS.

.mon-animation{ 
  animation-name : identifiant-animation;
  animation-timing-function : ease; 
  animation-iteration-count : 1;
  animation-direction : normal ;
  animation-fill-mode : none;
  animation-play-state : running;
  animation-duration : 2s;
  animation-delay : 2s;
}

Règles de syntaxes CSS pour animation.

Règles d'écriture de la propriété d'Animation CSS : animation

La propriété d'Animation CSS animation accepte une ou plusieurs valeurs citées ci-dessus qui seront séparées par un espace. Ce groupe de valeurs forme une déclaration d'une animation.
Si vous désirez déclarer une seconde animation, vous devez séparer les groupes de valeurs par une virgule.

.mes-animations{
  animation : une-animation 5s ease-out 0s infinite normal none
  ,
  deuxieme-animation 3s ease 1ms infinite;
}

@keyframes une-animation{ ...}
@keyframes deuxieme-animation{ ...}

Compatibilités navigateurs de la propriété animation

Propriétés CSS préfixées de animation

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété animation CSS :

Pour Firefox 5.0+ et < 19, vous pouvez utiliser : -moz-animation.
Pour Chrome 2.1+ et Safari 4.0 +, vous pouvez utiliser : -webkit-animation.
Pour Opera 12+, vous pouvez utiliser : -o-animation. Pour info, il semble les versions préfixées pour les animations CSS soient supprimées sur la version 12.50 au profit des versions w3c non préfixées.
Il existe bien une propriété CSS -ms-animation mais qui est compatible Internet Explorer 10 (donc pas d'intérêt de la mettre). Personnellement, je n'ai trouvé aucune documentation officielle sur la propriété CSS -ms-animation

Votre avis sur la définition animation en CSS