手册 reference of CSS

CSS @rules (RULES)

大全 of CSS properties

CSS3 Animation-Attribut delay CSS3 Aligner-Attribut self

CSS3 Méthode d'utilisation et exemples de l'attribut animation

La propriété CSS animation est une propriété abrégée des propriétés suivantes :Animation-Nom,Animation-Durée,Animation-Timing-Fonction,Animation-Delay,Animation-Iteration-Count,Animation-Direction,Animation-Fill-ModeetAnimation-Play-State.

Le tableau suivant résume l'utilisation et l'historique des versions de cette propriété.

Valeur par défaut :	none 0 ease 0 1 normal none running;
Appliqué à :	Tous les éléments::before et::after Pseudo-élément
Héritage :	Aucun
Animable :	Non.Voir également Propriété d'animation.
Version :	CSS3nouvelle fonction
Syntaxe JavaScript :	object.style.animation="mymove 5s infinite"

Syntaxe d'utilisation de l'animation

La syntaxe de cette propriété est la suivante :

animation:　[　name　duration　timing-function　delay　iteration-count　direction　fill-mode　play-state　]　|　initial　|　inherit

L'exemple suivant montre comment utiliser la propriété animation.

Exemple

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation:　moveit　2s　linear　0s　infinite　alternate;
　　　　
　　　　animation:　moveit　2s　linear　0s　infinite　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Voyons un exemple‹/›

Remarque :Il est nécessaire de spécifier au moins deux attributs animation-name et animation-Durée (supérieure à 0), pour que l'animation se déroule.

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cette propriété.

Valeur	Description
Animation-Nom	Spécifiez le nom de l'animation @keyframes à appliquer à l'élément sélectionné.
Animation-Durée	Spécifiez le temps nécessaire pour que l'animation termine un cycle, en secondes ou en millisecondes.
Animation-Timing-Fonction	Spécifiez comment l'animation doit être effectuée pendant la durée de chaque cycle, c'est-à-dire la fonction d'accélération.
Animation-Delay	Spécifiez le délai avant que l'animation ne commence.
Animation-Iteration-Count	Spécifiez le nombre de fois que l'animation doit être jouée avant de s'arrêter.
Animation-Direction	Spécifiez si l'animation doit être jouée à l'envers dans un cycle alternatif.
Animation-Fill-Mode	Spécifiez comment les styles doivent être appliqués à l'élément cible de l'animation CSS avant et après son exécution.
Animation-Play-State	Spécifiez si l'animation doit être exécutée ou arrêtée.
Initial	Réinitialisez cette propriété à sa valeur par défaut.
Inherit	Si spécifié, l'élément associé utilise la valeur calculée de l'attribut animation de son élément parent.

Compatibilité du navigateur

Compatibilité des navigateurs pour la propriété animation, tous les navigateurs populaires supportent cette propriété. Le nombre représente la version du premier navigateur qui supporte cette propriété.

	Firefox 5+ ^-moz-,15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-,15+ ^-webkit-

Pour en savoir plus

Veuillez consulter les tutoriels suivants :CSS3Animation.

Attributs et règles associés :Animation-Nom,Animation-Durée,Animation-Timing-Fonction,Animation-Delay,Animation-Iteration-Count,Animation-Direction,Animation-Fill-Mode,Animation-Play-State,@keyframes.

CSS3 Animation-Attribut delay CSS3 Aligner-Attribut self