VII. Propriétés de transformation et d'animation (CSS 3)▲
Les propriétés présentées dans cette partie peuvent nécessiter l'utilisation des préfixes vendeurs.
VII-A. Propriétés de transformation▲
Les transformations permettent de modifier le rendu visuel d'un ou plusieurs éléments. Ces transformations peuvent se faire dans le plan de la page (transformations 2D) ou dans un espace 3D.
Les transformations 2D sont correctement supportées par les navigateurs récents, en revanche, les transformations 3D, apparues plus récemment, le sont un peu moins.
Complément d'information : Les transformations 2D en CSS3.
VII-A-1. Origine de la transformation | transform-origin▲
transform-origin : permet de définir quel sera le point d'origine de la transformation.
Syntaxe : [<pourcentage> | <longueur> | left | center | right | top | bottom] | [[<pourcentage> | <longueur> | left | center | right ] && [ <pourcentage> | <longueur> | top | center | bottom]]
Compatibilité (base) : IE 9+, FF 3.5+, Chrome, Safari 3.1+, Opera 10.5+
Compatibilité (3D ; trois valeurs) : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+
Version CSS : 3
Notes :
Trois valeurs sont possibles correspondant au déplacement sur les axes X, Y et Z (valeurs par défaut 50% 50% 0). Si une seule valeur est passée, l'origine est uniquement déplacée sur l'axe X (à moins que cette valeur soit un mot-clé spécifique à l'axe Y :top ou bottom, dans ce cas, seul l'axe Y est impacté), les autres axes prennent leur valeur par défaut.
Si deux valeurs sont passées, elles correspondent aux axes X et Y, l'axe Z prend sa valeur par défaut.
Seules des longueurs sont acceptées pour l'axe Z. L'origine peut se trouver en dehors de l'élément transformé (voir les démos de rotate() et scale()).
Démo de mise en œuvre de cette propriétéRotation | rotate().
Exemples :
transform-origin: 25%;
transform-origin: top -50px;
transform-origin: 2em bottom 10px;VII-A-2. Perspective 3D | perspective▲
perspective | transform: perspective() : permettent de déterminer le point de fuite des transformations 3D et d'appliquer des effets de perspective.
Syntaxe (perspective) : none | <longueur>
Syntaxe (transform) : perspective(none | <longueur>)
Il existe deux façons de déclarer une perspective (voir exemples). Soit avec la propriété perspective, soit sous forme de fonction de transformation liée à la propriété transform.
La première permet de définir une perspective pour un ensemble d'éléments à partir d'un élément parent commun, la seconde pour une perspective liée à un seul élément en la combinant avec d'autres fonctions de transformation.
Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+
Version CSS : 3
Explications.
La valeur de la perspective permet de déterminer la distance de l'utilisateur au plan z=0. Si elle vaut none, 0 ou une valeur non autorisée, aucune perspective n'est appliquée.
Les dimensions affichées de chaque élément vont dépendre de leur positionnement selon l'axe z, un élément dont la position sur l'axe z est positive sera vu plus grand et plus petit pour une position négative.
Un élément se trouvant sur un plan de coordonnée z supérieure ou égale à la valeur de la perspective sera considéré comme « derrière » l'utilisateur et ne sera pas affiché.
Sur Firefox, un élément situé sur l'axe z à la même valeur que la perspective n'est pas affiché, pour les valeurs supérieures, il est affiché retourné.
Exemples :
perspective: none;
perspective: 25px;
perspective: 2em;Exemples :
transform: perspective(none);
transform: perspective(25px);
transform: perspective(2em);Dans la démo suivante, entrez les coefficients, puis cliquez sur « Appliquer » (cliquez sur la boîte jaune pour annuler).
#element{ /* L'élément recevant la transformation */
transform: perspective(xpx) translateZ(zpx); /* x : valeur du champ Perspective ; z : valeurs du champ Décalage Z */
}VII-A-3. Origine de la perspective | perspective-origin▲
transform-origin : permet de définir quel sera le point d'origine de la perspective.
Syntaxe : [<pourcentage> | <longueur> | left | center | right | top | bottom] | [[<pourcentage> | <longueur> | left | center | right ] && [ <pourcentage> | <longueur> | top | center | bottom]]
Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+
Version CSS : 3
Note : par défaut, l'origine de la perspective se trouve au centre de l'élément (50% 50%).
Exemples :
perspective-origin: 25%;
perspective-origin: top -50px;Dans la démo suivante, entrez les coefficients, puis cliquez sur « Appliquer » (cliquez sur la boîte jaune pour annuler).
Perspective : px |
#outerElement{ /* Bordure pointillée */
perspective: Zpx; /* Z : valeur de Perspective */
perspective-origin: Xpx Ypx; /* X : valeur de Origine X ; Y : valeur de Origine Y */
}
#innerElement{ /* Cadre doré */
transform: translateZ(50px);
}VII-A-4. Fonctions de transformation | transform▲
transform : permet d'appliquer une fonction de transformation sur un élément.
Syntaxe : none | <transform-fonction>+
Compatibilité (fonctions de base) : IE 9+, FF 3.5+, Chrome, Safari 3.1+, Opera 10.5+
Compatibilité (fonctions 3D) : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+
Version CSS : 3
Complément d'information : Les transformations en CSS 3.
Il est possible de définir plusieurs transformations différentes sur un même élément, par exemple :
selecteur{
transform: translate(100px, 50px) rotate(50deg);
}Si la valeur de transform est différente de none, alors un nouveau contexte d'empilement est créé, ce qui influe sur le comportement de z-index.
Translation | translate()▲
translate() | translate3d() : permettent de déplacer l'élément sur les différents axes.
Syntaxe : translate(<longueur-x>[, <longueur-y>])
Syntaxe : translate3d(<longueur-x>, <longueur-y>, <longueur-z>)
Notes.
longueur-x, longueur-y et le cas échéant longueur-z sont des longueurs, les pourcentages ne sont pas autorisés.
Pour translate(), une seule valeur est autorisée, dans ce cas, elle est appliquée aux deux dimensions.
Il est possible d'effectuer une translation sur un seul axe avec les dérivés translateX(), translateY() et translateZ().
Exemples :
-moz-transform: translate(100px, -50px);
-webkit-transform: translate(100px, -50px);
-ms-transform: translate(100px, -50px);
-o-transform: translate(100px, -50px);
transform: translate(100px, -50px);Dans la démo suivante, entrez les valeurs numériques pour les décalages en X et Y dans les champs suivants et cliquez sur « Déplacer » (cliquez sur la boîte jaune pour annuler le déplacement).
#element{ /* L'élément recevant la transformation */
transform: translate(xpx, ypx); /* x : valeur du champ Décalage X ; y : valeurs du champ Décalage Y */
}Rotation | rotate()▲
rotate() | rotate3d() : permettent de faire pivoter un élément suivant le point d'origineOrigine de la transformation | transform-origin.
Syntaxe : rotate(<angle>)
Syntaxe : rotate3d(<longueur-x>, <longueur-y>, <longueur-z>, <angle>)
Notes.
Pour rotate3d(), longueur-x, longueur-y et longueur-z sont des longueurs, les pourcentages ne sont pas autorisés.
Il est possible d'effectuer une rotation sur un seul axe avec les dérivés rotateX(), rotateY() et rotateZ().
- deg (degrés), un cercle complet mesure 360 degrés (360deg) ;
- grad (grades), un cercle complet mesure 400 grades (400grad) ;
- rad (radians), un cercle complet mesure 2π (≈6.2832rad) ;
- turn (tour), un cercle complet mesure 1 tour (1turn).
Quatre unités d'angle sont autorisées :
Exemples :
-moz-transform: rotate(260deg);
-webkit-transform: rotate(300grad);
-ms-transform: rotate(1.2rad);
-o-transform: rotate(0.25turn);
transform: rotate(260deg);Dans la démo suivante, entrez l'angle de rotation, l'unité, puis cliquez sur « Rotation » (si rien ne se passe, c'est que l'unité n'est pas reconnue, cliquez sur la boîte jaune pour annuler la rotation).
#element{ /* L'élément recevant la transformation */
transform-origin: valeur; /* Valeur du champ Origine */
transform: rotate(x<angle>); /* x : valeur du champ Angle ; <angle> : valeurs du champ Unité */
}Redimensionnement | scale()▲
scale() | scale3d() : permettent de redimensionner un élément selon les différents axes.
Syntaxe : scale(<nombre-x>[, <nombre-y>])
Syntaxe : scale3d(<nombre-x>, <nombre-y>, <nombre-z>)
Notes.
nombre-x, nombre-y et le cas échéant nombre-z correspondent aux facteurs de redimensionnement, les valeurs négatives sont autorisées, dans ce cas, l'élément semblera retourné. Les valeurs supérieures à 1 agrandiront l'élément, les valeurs inférieures le rétréciront.
Pour scale(), une seule valeur est autorisée, dans ce cas, elle est appliquée aux deux dimensions.
Il est possible d'effectuer un redimensionnement sur un seul axe avec les dérivés scaleX(), scaleY() et scaleZ().
Exemples :
-moz-transform: scale(1.5);
-webkit-transform: scale(0.5, 0.8);
-ms-transform: scale(1.5, 0.5);
-o-transform: scale(1);
transform: scale(2,1.5);Dans la démo suivante, entrez les coefficients, puis cliquez sur « Redimensionner » (cliquez sur la boîte jaune pour annuler la rotation).
#element{ /* L'élément recevant la transformation */
transform-origin: valeur; /* Valeur du champ Origine */
transform: scale(x, y); /* x : valeur du champ Axe X ; y : valeurs du champ Axe Y */
}Distorsion | skew()▲
skew() | skewX() | skewY() : permettent la distorsion des éléments.
Syntaxe : skew(<angle-x>[, <angle-y>])
Syntaxe : skewX(<angle-x>) | skewY(<angle-y>)
Notes.
angle-x et angle-y sont des angles qui déterminent l'angle de la distorsion à appliquer sur chaque axe, les valeurs négatives sont autorisées.
Pour skew(), une seule valeur est autorisée, dans ce cas, l'angle sur l'axe y vaut 0.
Le comportement de skew() avec deux valeurs n'est pas le même que si l'on applique successivement skewX() et skewY() avec des valeurs identiques.
Exemples :
-moz-transform: skew(260deg);
-webkit-transform: skew(-300grad, 45deg);
-ms-transform: skewX(1.2rad);
-o-transform: skewY(0.25turn);
transform: skew(260deg);Dans la démo suivante, entrez les angles, puis cliquez sur « Déformer » (cliquez sur la boîte jaune pour annuler la déformation).
Attention : certaines valeurs d'angles proches provoquent une déformation aux dimensions excessives de l'élément, d'autres le rendent invisible.
#element{ /* L'élément recevant la transformation */
transform: skew(adeg, adeg); /* Si skew() sélectionné ; a : valeur du champ Angle */
transform: skewX(adeg); /* Si skewX() sélectionné ; a : valeur du champ Angle */
transform: skewY(adeg); /* Si skewY() sélectionné ; a : valeur du champ Angle */
}Transformation matricielle | matrix()▲
matrix() | matrix3d() : permettent de transformer un élément selon une matrice de transformation.
Syntaxe : matrix(<nombre-a>, <nombre-b>, <nombre-c>, <nombre-d>, <longueur-x>, <longueur-y>)
Syntaxe : matrix3d(<matrice-4x4>)
Notes.
En réalité, toutes les fonctions de transformation utilisent matrix() (ou matrix3d()), les autres fonctions ne sont que des formes simplifiées.
Le fonctionnement de matrix() et matrix3d() ainsi que le détail des paramètres impliquent des notions complexes (notamment mathématiques) qui vont au-delà du cadre de ce glossaire, ces points ne seront donc pas détaillés.
Pour les versions préfixées de Firefox (-moz-transform), les longueurs doivent contenir l'unité.
Article détaillé sur les matrices de transformation : The CSS3 matrix() Transform for the Mathematically Challenged.
Exemples :
-moz-transform: matrix(1, 0, 0.6, 1, 250px, 25px);
-webkit-transform: matrix(1, 0, 0.6, 1, 250, 25);
-o-transform: matrix(1, 0, 0.6, 1, 250, 25);
-ms-transform: matrix(1, 0, 0.6, 1, 250, 25);
transform: matrix(1, 0, 0.6, 1, 250, 25);VII-A-5. Face arrière | backface-visibility▲
backface-visibility : permet d'indiquer la visibilité de la face arrière d'un élément.
Syntaxe : visible | hidden
Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+
Version CSS : 3
Notes.
La face arrière d'un élément est toujours transparente, la visibilité indique donc si l'on peut voir la face avant en miroir (visible) ou non (hidden).
Bien qu'il soit possible d'utiliser cette propriété pour des transformations 2D, elle est surtout utile pour les transformations 3D, permettant ainsi de visualiser ou non les éléments superposés.
Démo.
<div id="conteneur">
<div id="element">Texte</div>
<div id="under"></div>
</div>#conteneur{ /* Le conteneur (bordure pointillée)
transform-style: preserve-3d; /* Permet l'empilement sur l'axe z des éléments */
}
#element{ /* L'élément recevant la transformation (fond doré) */
backface-visibility: visible|hidden; /* Case Fond arrière visible cochée|décochée */
transform: rotateY(180deg|0); /* Case Élément retourné cochée|décochée */
}
#under{ /* L'élément en dessous (fond image developpez.com) */
transform: translateZ(-10px); /* Permet de déplacer en arrière sur l'axe z */
}VII-A-6. Héritage 3D | transform-style▲
transform-style : permet d'indiquer si les éléments enfants héritent de l'espace 3D de leur parent ou en créent un nouveau à partir de celui-ci.
Syntaxe : flat | preserve-3d
Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+
Internet Explorer (y compris la version 11) ne reconnait que la valeur flat pour cette propriété.
Version CSS : 3
Explications.
Lorsque l'on crée un espace 3D, deux types de comportement peuvent être souhaités : soit chaque élément est indépendant des autres et peut être déplacé individuellement, soit certains éléments peuvent contenir des éléments enfants dépendants de celui-ci.
Par exemple, si l'on veut créer un dé, on créera six éléments (les faces) qui appartiendront à l'espace 3D puis on intégrera à chaque face un nombre d'images constituant les points du dé, ces images devront donc être liées à la face associée sans être intégrées à l'espace 3D.
La valeur flat indique que les éléments enfants appartiennent au plan de leur parent, la valeur preserve-3d qu'ils appartiennent à l'espace 3D.
Démo.
Dans cet exemple, l'image est enfant du cadre doré. On applique au cadre une rotation de 45° (rotateY(45deg)) et à l'image une translation de 50px (translateZ(50px)).
Si preserve-3d est cochée, l'image appartient à l'espace 3D et la transformation s'applique, si flat est cochée, l'image appartient au cadre et la translation ne s'applique plus (sauf si l'on définit une valeur de perspective pour le cadre).
#conteneur{ /* Le conteneur (bordure pointillée)
perspective: 200px;
}
#element{ /* L'élément recevant la transformation (fond doré) */
transform-style: preserve-3d|flat; /* Case preserve-3d|flat cochée */
transform: rotateY(45deg);
}
#image{ /* L'élément image interne (image developpez.com) */
transform: translateZ(50px); /* Permet de déplacer en arrière sur l'axe z */
}VII-A-7. Exemple de transformation 3D▲
Dans le code HTML, l'ordre des faces est inversé pour éviter que les navigateurs ne prenant pas en compte la valeur preserve-3d n'affichent les faces cachées au-dessus des faces visibles.
VII-B. Propriétés de transition▲
Il est de plus en plus fréquent qu'une page Web modifie l'apparence de certains éléments en fonction des interactions avec l'utilisateur, que ce soit en CSS (avec notamment la pseudoclasse :hover) ou en JavaScript.
Les transitions CSS permettent de fluidifier ces changements d'aspect visuel en animant les propriétés CSS impliquées d'un état à un autre.
Complément d'information : Les transitions en CSS3.
S'il est possible d'animer un grand nombre de propriétés CSS, certaines ne le permettent toutefois pas. Voir une liste des propriétés qui peuvent être animées.
Les principaux navigateurs ont intégré la version non préfixée des propriétés liées aux transitions depuis plusieurs versions. Quant à IE, si l'implémentation est récente (IE 10+), il n'y a pas eu de version préfixée de ces propriétés.
Il ne semble donc pas utile d'utiliser les versions préfixées si ce n'est pour les utilisateurs ne mettant pas à jour leur navigateur (ce qui est rare, car ceux-ci ont un système de mise à jour automatique activé par défaut).
VII-B-1. Nom de propriété(s) | transition-property▲
transition-property : permet de définir quelle(s) propriété(s) sera (seront) animée(s).
Syntaxe : none | all | <propriete>[, <propriete>]*
Compatibilité : IE 10+, FF 4+, Chrome, Safari, Opera 11.6+
Version CSS : 3
Exemples :
transition-property: none;
transition-property: all;
transition-property: width, color, transform, -webkit-transform, -ms-transform, -o-transform;VII-B-2. Durée de transition | transition-duration▲
transition-duration : permet de définir la durée de la transition.
Syntaxe : inherit | <duree>[, <duree>]*
Compatibilité : IE 10+, FF 4+, Chrome 1, Safari 3, Opera 11.6+
Version CSS : 3
Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une durée de 0s indique qu'aucun effet ne sera appliqué.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que de durées, le navigateur revient au début de la liste pour compléter, s'il y a plus de durées, les dernières sont ignorées.
Exemples :
transition-duration: 2s;
transition-duration: 250ms;
transition-duration: 2s, 250ms, 120ms;
transition-duration: inherit;VII-B-3. Effet de transition | transition-timing-function▲
transition-timing-function : permet d'assouplir l'effet de transition selon une fonction dite d'easing.
Syntaxe : <effet>[, <effet>]*
Valeurs possibles : linear, ease (valeur par défaut), ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier(x1, y1, x2, y2), steps(nb_pas, start|end).
Compatibilité : IE 10+, FF 4+, Chrome, Safari, Opera 11.6+
Version CSS : 3
Complément d'information : Easing Functions - Guide de référence.
Notes.
Pour la fonction cubic-bezier(), x1, y1, x2 et y2 correspondent à des nombres (x1 et x2 doivent être compris entre 0 et 1) qui vont définir une courbe de Bézier.
Pour la fonction steps(), des états intermédiaires (le nombre de pas) seront affichés à intervalles de temps réguliers, start et end indiquent si le nouvel état doit être affiché au début ou à la fin de l'intervalle.
Il est possible d'indiquer plusieurs effets (séparés par des virgules), dans ce cas, ils correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que d'effets, le navigateur revient au début de la liste pour compléter, s'il y a plus d'effets, les derniers sont ignorés.
Exemples :
transition-timing-function: linear;
transition-timing-function: step(4, end);
transition-timing-function: cubic-bezier(0.25, -0.8, 0.75, 2);
transition-timing-function: ease-in, step-start, cubic-bezier(0.2, 1.75, 0.8, 0.75);VII-B-4. Délai de démarrage | transition-delay▲
transition-delay : permet d'indiquer un délai avant de démarrer une transition.
Syntaxe : initial | <duree>[, <duree>]*
Compatibilité : IE 10+, FF 4+, Chrome 1, Safari 3, Opera 11.6+
Version CSS : 3
Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une valeur de 0s ou initial indique que la transition sera appliquée immédiatement.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que de durées, le navigateur revient au début de la liste pour compléter, s'il y a plus de durées, les dernières sont ignorées.
Il est possible d'indiquer une valeur négative, dans ce cas, la transition débutera aussitôt, mais au point où elle aurait dû être si elle avait commencé au moment indiqué par le délai négatif.
Exemples :
transition-delay: 2s;
transition-delay: -250ms;
transition-delay: 2s, 250ms, 120ms;
transition-delay: initial;VII-B-5. La transition tout-en-un | transition▲
transition : regroupe toutes les propriétés de transition.
Syntaxe : <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>
Compatibilité : IE 10+, FF 4+, Chrome 1, Safari 3, Opera 11.6+
Version CSS : 3
Note : il est possible d'indiquer plusieurs transitions séparées par des virgules.
Exemples :
transition: all 2s;
transition: width 250ms, height 100ms 250ms;
transition: all 2s steps(5, end) 250ms, 120ms;VII-B-6. Exemple récapitulatif▲
L'exemple suivant vous montre la mise en œuvre de certaines fonctionnalités de transition.
Dans cet exemple, on affiche le dos doré d'une carte. Au survol du cadre pointillé, la carte se retourne et se déplace sur la droite en laissant apparaitre la figure.
Vous pouvez constater dans le code HTML qu'il s'agit en fait de deux éléments distincts animés de façon synchronisée : il n'est pas possible (du moins pas encore) de donner des styles à la face arrière d'un élément.
Une fois la carte retournée, un troisième élément, initialement transparent (opacity: 0) apparait pour afficher un message (voir le code de l'exemple).
Les navigateurs ne reconnaissant pas les transformations 3D ne verront pas le dos doré ni l'effet de retournement, mais juste un glissement de la carte vers la droite. Les autres animations seront visibles.
VII-C. Propriétés d'animation▲
Les animations CSS permettent de modifier certaines propriétés CSS d'un ou plusieurs éléments dans le temps. Elles se composent de deux éléments : une description de l'animation sous forme d'expression CSS (at-rule) et des propriétés applicables à un (ou plusieurs) élément sur lequel doit s'effectuer l'animation.
Si les propriétés sont appliquées à des sélecteurs (donc à des éléments), la description est, elle, indépendante dans le code CSS.
Il existe plusieurs différences notables entre une transition et une animation CSS.
Une transition est déclenchée lorsqu'une propriété CSS est modifiée alors qu'une animation va modifier elle-même une propriété selon des règles déterminées.
En dehors des fonctionEffet de transition | transition-timing-functione transition, une transition n'est pas paramétrable alors qu'une animation permet de définir des étapes-clés.
Une transition nécessite une action (soit de la part de l'utilisateur, soit avec un script JavaScript) pour être déclenchée, ce qui n'est pas forcément le cas d'une animation.
Une transition ne s'exécute qu'une fois par changement d'état alors qu'une animation peut être répétée.
VII-C-1. Étapes de l'animation | @keyframes▲
@keyframes : indique les différentes étapes de l'animation et la valeur de chaque propriété pour cette étape.
Syntaxe :
@keyframes <identifiant>{
[[ from | to | <pourcentage> ] [, from | to | <pourcentage> ]* bloc ]*
}Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+
Version CSS : 3
Explications.
La syntaxe de l'expression CSS @keyframes est un peu particulière.
On commence avec le mot-clé @keyframes (éventuellement préfixé, voir les exemples) suivi du nom souhaité pour l'animation (<identifiant>), il servira à appeler cette animation pour un sélecteur. On ouvre ensuite un bloc (à l'aide d'accolades {}) pour définir les différentes étapes de l'animation.
Chaque étape débute par une valeur (from, to ou pourcentage) suivie d'un nouveau bloc.
Ces blocs contiendront les différentes propriétés à animer et leur valeur à cette étape de l'animation.
Les déclarations @keyframes ne sont pas liées à un sélecteur et se trouvent donc en dehors des déclarations de styles liées à ceux-ci.
Notes.
Pour être valide, l'animation doit au moins comprendre les étapes from (ou 0%, la valeur 0 n'est pas valide) et to ( ou 100%), si l'une (ou les deux) manque, le navigateur devra la créer en utilisant les valeurs calculées des propriétés devant être animées.
Les propriétés non animables ou les étapes hors de la plage [0% 100%] sont ignorées.
Si une propriété n'est pas déclarée à une étape (ou si sa déclaration n'est pas valide), l'animation pour cette propriété se fera comme si cette étape n'existait pas.
Si une animation est déclarée plusieurs fois, seule la dernière déclaration est prise en compte, il n'y a pas de notion de cascade pour @keyframes.
Si une étape est déclarée plusieurs fois, seule la dernière déclaration est utilisée, cependant, certains navigateurs ont mis en place un système de cascade non prévu par la spécification.
Il n'y a pas d'obligation à déclarer les étapes dans l'ordre chronologique.
Il est possible de grouper plusieurs étapes dont les valeurs seraient identiques en les séparant par des virgules.
Exemples :
@keyframes clignote{
from, 100%{
color: red;
}
50%{
color: blue;
}
}
@-moz-keyframes bouge{
from{
left: 0%;
}
75%{
left: 90%;
}
50%{
left: 80%;
}
to{
left: 100%;
}
}
@-webkit-keyframes bordure{
50%{
border-width: 10px;
}
}
@keyframes erreur{
from{
border-radius: 0;
}
100%{
border-radius: 25px;
}
to{
/* Cette déclaration vide est supposée écraser la précédente
qui correspond à la même étape : aucune animation ne sera visible.
Firefox contourne la spécification et
utilise la cascade, rendant l'animation visible. */
}
}VII-C-2. Nom de l'animation | animation-name▲
animation-name : indique le nom de l'animation à utiliser.
Syntaxe : none | <nom>#
Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+
Version CSS : 3
Note : un nom valide doit commencer par une lettre ou un tiret (mais pas deux) suivi d'une lettre puis les caractères de la classe [-_0-9a-zA-Z].
Exemples :
animation-name: foo;
animation-name: foo1_bar;
animation-name: -Foo-Bar2;
animation-name: foo, bar;VII-C-3. Durée de l'animation | animation-duration▲
animation-duration : permet de définir la durée de l'animation.
Syntaxe : <duree>
Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+
Version CSS : 3
Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une durée de 0s indique qu'aucun effet ne sera appliqué.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans animation-name.
Exemples :
animation-duration: 2s;
animation-duration: 250ms;
animation-duration: 2s, 250ms, 120ms;VII-C-4. Effet de l'animation | animation-timing-function▲
animation-timing-function : permet d'assouplir l'animation selon une fonction dite d'easing.
Syntaxe : <effet>[, <effet>]*
Valeurs possibles : linear, ease (valeur par défaut), ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier(x1, y1, x2, y2), steps(nb_pas, start|end).
Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+
Version CSS : 3
Complément d'information : Easing Functions - Guide de référence.
Notes.
Pour la fonction cubic-bezier(), x1, y1, x2 et y2 correspondent à des nombres (x1 et x2 doivent être compris entre 0 et 1) qui vont définir une courbe de Bézier.
Pour la fonction steps(), des états intermédiaires (le nombre de pas) seront affichés à intervalles de temps réguliers, start et end indiquent si le nouvel état doit être affiché au début ou à la fin de l'intervalle.
Il est possible d'indiquer plusieurs effets (séparés par des virgules), dans ce cas, ils correspondront aux différentes animations listées dans animation-name dans le même ordre ; s'il y a plus de propriétés que d'effets, le navigateur revient au début de la liste pour compléter, s'il y a plus d'effets, les derniers sont ignorés.
La fonction définie s'applique à chaque intervalle de l'animation et non à l'ensemble de l'animation.
Toutefois, il est possible d'indiquer une valeur de animation-timing-function dans un intervalle de @keyframes, dans ce cas, c'est cette fonction qui sera utilisée pour cet intervalle.
Exemples :
animation-timing-function: linear;
animation-timing-function: step(4, end);
animation-timing-function: cubic-bezier(0.25, -0.8, 0.75, 2);
animation-timing-function: ease-in, step-start, cubic-bezier(0.2, 1.75, 0.8, 0.75);
@keyframes{
...
50%{
...
animation-timing-function: linear;
}
...
}VII-C-5. Délai de l'animation | animation-delay▲
animation-delay : permet d'indiquer un délai avant de démarrer une animation.
Syntaxe : initial | <duree>
Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+
Version CSS : 3
Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une valeur de 0s ou initial indique que la transition sera appliquée immédiatement.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que de durées, le navigateur revient au début de la liste pour compléter, s'il y a plus de durées, les dernières sont ignorées.
Il est possible d'indiquer une valeur négative, dans ce cas, l'animation débutera aussitôt, mais au point où elle aurait dû être si elle avait commencé au moment indiqué par le délai négatif.
Exemples :
animation-delay: 2s;
animation-delay: -250ms;
animation-delay: 2s, 250ms, 120ms;
animation-delay: initial;VII-C-6. Itérations de l'animation | animation-iteration-count▲
animation-iteration-count : détermine le nombre de répétitions de l'animation.
Syntaxe : infinite | <nombre>
Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+
Version CSS : 3
Notes.
La valeur infinite indique que l'animation sera répétée indéfiniment.
Les valeurs négatives ne sont pas valides.
Il est possible d'indiquer un nombre non entier. Dans ce cas, la dernière répétition sera incomplète en proportion de la partie décimale (par exemple, la valeur 0.5 montrera la moitié de l'animation.
Exemples :
animation-iteration-count: infinite;
animation-iteration-count: 5;
animation-iteration-count: 2.5;VII-C-7. Sens de l'animation | animation-direction▲
animation-direction : permet de définir le sens de l'animation suivant les répétitions.
Syntaxe : normal | reverse | alternate | alternate-reverse
Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+
Version CSS : 3
Explications.
normal : l'animation sera jouée selon le sens prévu. reverse : l'animation sera jouée à l'envers (à partir de la fin). alternate : l'animation se fera de façon alternée à chaque itération. alternate-reverse : l'animation se fera de façon alternée à chaque itération, mais en commençant à l'envers.
Exemples :
animation-direction: alternate;
animation-direction: alternate, alternate-reverse;VII-C-8. État de l'animation | animation-play-state▲
animation-play-state : détermine si l'animation est en pause ou non.
Syntaxe : running | paused
Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+
Version CSS : 3
Explications.
Cette propriété permet de savoir ou d'indiquer si une animation est en cours d'exécution (running) ou en pause (paused).
Il est possible d'interroger cet état (par exemple en JavaScript : AnimatedElement.animationPlayState) pour connaitre son état actuel.
Lorsqu'une animation en pause redémarre, elle le fait au point où elle s'était arrêtée.
Exemples :
animation-play-state: running;
animation-play-state: paused;VII-C-9. Style de l'élément hors animation | animation-fill-mode▲
animation-fill-mode : indique quelles propriétés CSS sont applicables avant et après l'animation.
Syntaxe : none | backwards | forwards | both
Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+
Version CSS : 3
Explications.
Par défaut, une animation ne modifie pas les propriétés de l'élément auquel elle s'applique entre le moment où elle est définie et le moment où elle démarre (donc pendant la période de animation-delay), ni après son exécution.
Il est possible de modifier ce comportement avec la propriété animation-fill-mode.
Si la valeur backwards est appliquée, les propriétés CSS de l'élément prendront les valeurs du premier pas de l'animation durant la période animation-delay. Ce premier pas est déterminé en fonction de la propriété animation-direction : si l'animation commence à l'endroit (valeurs normal ou alternate), il s'agit des valeurs CSS de from (ou 0%), si l'animation commence à l'envers (valeurs reverse ou alternate-reverse), il s'agit des valeurs CSS de to (ou 100%).
Si la valeur forwards est appliquée, les propriétés CSS de l'élément prendront les valeurs du dernier pas de l'animation après l'exécution de celle-ci selon les mêmes règles concernant animation-direction.
Si la valeur both est indiquée, les règles concernant backwards et forwards seront appliquées avant et après l'animation.
Exemple :
animation-play-state: both;VII-C-10. L'animation tout-en-un | animation▲
animation : regroupe toutes les propriétés d'animation.
Syntaxe : <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state>
Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+
Version CSS : 3
Note : en dehors du nom, toutes les valeurs sont optionnelles et l'ordre n'importe pas sauf pour les durées : la première durée sera toujours interprétée comme animation-duration et la seconde comme animation-delay.
Exemple :
animation: aller_retour 2s ease-in-out infinite alternate;VII-C-11. Exemple récapitulatif▲
L'exemple suivant vous montre la mise en œuvre de certaines fonctionnalités d'animation.
Pour activer l'animation, il faut survoler le cadre pointillé (activation de la propriété animation-play-state). Une fois l'animation lancée (et tant que la souris survole le cadre pointillé), un carré se déplace de gauche à droite puis de droite à gauche en effectuant une rotation et en diminuant son opacité.
Au milieu de l'animation (50%), on modifie la fonction d'easing (step-start) pour les propriété concernées par cette étape (opacity et transform) et leur modification se fera en une seule fois au début de cet intervalle (non visible pour transform).
Vous pouvez modifier avec les listes déroulantes les valeurs de animation-duration et animation-direction.
Tous les navigateurs ne permettent pas la modification individuelle des propriétés de l'animation, les listes déroulantes seront sans effet avec ces navigateurs.
L'exemple est susceptible de boguer avec Internet Explorer qui implémente encore mal l'utilisation de animation-timing-function dans @keyframes.
L'utilisation de la propriété -webkit-transform dans la version non préfixée de @keyframes pourra sembler inutile. Elle est due au fait que Chrome reconnait @keyframes (mais étonnamment pas encore animation-*) alors qu'Opera, qui utilise le moteur webkit depuis la version 15, demande la version préfixée @-webkit-keyframes.