Les animations CSS
Qu'est-ce qu'une transformation?
⚫ La propriété de transformation CSS permet de
modifier l'espace de coordonnées du modèle de
formatage visuel CSS. En l'utilisant, les
éléments peuvent être transformés, pivotés, mis
à l'échelle et inclinés en fonction des valeurs
définies.
Transform : la syntaxe
⚫ Pas de transformation
⚫ Une transformation
⚫ Plusieurs transformations
Transform : les fonctions
⚫ Rotate
⚫ Scale
⚫ Skew
⚫ Translate
⚫ Matrix
Rotate
⚫ Fait pivoter un élément dans le sens des
aiguilles d'une montre à partir de sa position
actuelle. Des rotations dans le sens anti-horaire
peuvent être obtenues en utilisant des valeurs
négatives.
Rotate : La syntaxe
⚫ Les angles sont exprimés en valeurs positives
ou négatives.
⚫ Ex : -5deg, 20deg.
Exemple
Rotate : exemple
⚫ Rotation de 25deg vers la droite
⚫ Rotation de 25deg vers la gauche
Scale
⚫
⚫ Met à l'échelle un élément par rapport à sa taille
d'origine. Les valeurs spécifiées dans les
transformations d'échelle sont sans unité et
doivent être considérées comme un
multiplicateur.
Scale : exemple
⚫ Réduire à la moitié de sa taille
⚫ Doubler la hauteur
Skew
⚫ Incline un élément le long des axes X et / ou Y
d'une valeur d'angle.
Skew : syntaxe
⚫ Inclinaison de l’axe X
⚫ Inclinaison de l’axe Y
Skew : exemple
⚫ Inclinaison à gauche
⚫ Inclinaison gauche et haut
Translate
⚫ Déplace un élément verticalement et / ou
horizontalement par rapport à sa position
actuelle. Les valeurs positives déplacent
l'élément vers la droite ou vers le bas sur l'axe
des Y. Inversement, les valeurs négatives
déplacent l'élément vers la gauche sur l'axe des
X ou vers le haut sur l'axe des Y. Toute valeur
de longueur régulière peut être utilisée (px, em,
etc.).
Translate : syntaxe
⚫ Déplacement sur les axes X et Y
⚫ Déplacement sur l’axe X
⚫ Déplacement sur l’axe Y
Translate : exemple
Transformer l'origine (transform-
origin)
⚫ Une propriété CSS qui définit le point à partir
duquel une transformation CSS est appliqué à
un élément. Par défaut, transform-origin est
défini sur le centre d'un élément (50% 50%).
Transform-origin : syntaxe
⚫ x-offset: longueur ou pourcentage du bord gauche de la boîte de l'élément.
⚫ y-offset: une longueur ou un pourcentage du bord supérieur de la boîte de l'élément
⚫ Mots-clés acceptés :
left (0%)
center (50%)
right (100%)
top (0%)
bottom (100%)
Rotation de 25 degrés vers la gauche et transformation de
l'origine en haut à droite
Rotation de 25 degrés vers la gauche et transformation de
l'origine en bas à droite
Les transistions (transition)
⚫ "mouvement, passage ou changement d'une
position, d'un état, d'une étape, d'un sujet, d'un
concept, etc., à une autre; changement"
[Link]
⚫ "La propriété de transition est une propriété
abrégée utilisée pour représenter jusqu'à quatre
propriétés longues associées à la transition
[permettant] aux éléments de modifier les
valeurs sur une durée spécifiée, en animant les
modifications de propriété, plutôt que de les
produire immédiatement." CSS-Triks
Transition : propriétés
⚫ transition-property
⚫ transition-duration
⚫ transition-timing-function
⚫ transition-delay
Transition : exemple
⚫ Etat de départ
⚫ État actif
Propriété : transition-duration
⚫ Spécifie la durée de la transition.
⚫
⚫ Syntaxe :
⚫
⚫ Valeurs :
⚫ temps en secondes ou millisecondes (ms)
⚫ valeurs de temps multiples, séparées par des
virgules
⚫ Hériter
⚫ initial
Transition : exemple2
⚫ Etat de départ
⚫ État actif
Propriété : transition-timing
⚫ Spécifie le rythme auquel la transition se
déroulera.
⚫ Syntaxe :
⚫ Valeurs :
- ease
- linear
- ease-in - ease-out
ease-in-out
- step-start – step-end
- valeur de courbe de Bézier cubique personnalisée
cubic-bezier(x,y,z,w)
Transition : exemple3
⚫ État de départ
⚫ État actif
Propriété : transition-delay
⚫ Spécifie le début de la transition par rapport à
l'instant où la valeur de la propriété change.
⚫ Syntaxe :
⚫ Valeurs :
⚫ temps en secondes ou millisecondes (ms)
⚫ valeurs de temps multiples, séparées par des
virgules
⚫ Hériter
⚫ initial
Propriété : transition-delay
⚫ Spécifie le début de la transition par rapport à
l'instant où la valeur de la propriété change.
⚫ Syntaxe :
⚫ Valeurs :
⚫ temps en secondes ou millisecondes (ms)
⚫ valeurs de temps multiples, séparées par des
virgules
⚫ Hériter
⚫ initial
⚫
Transition : exemple4
⚫ Etat de départ
⚫ État actif
Les animations
⚫ “Un moyen pour animer les valeurs des
propriétés CSS au fil du temps, à l'aide de
kayframes. Le comportement de ces kayframes
peut être contrôlé en spécifiant leurs durées,
leurs nombres de répétitions. "
⚫ - W3C draft specification
Animation: Keyframes
⚫ Les keyframe définissent le comportement d'une animation
dans le temps.
Propriétés requises :
⚫ animation-duration
⚫ animation-name
Propriétés facultatives :
⚫ animation-timing-function
⚫ animation-delay
⚫ animation-iteration-count
⚫ animation-direction
⚫ animation-fill-mode
⚫ animation-play-state
Propriété : animation-duration
⚫ Spécifie la durée d'un cycle d'animation.
Syntaxe :
Valeurs :
temps en secondes ou millisecondes (ms)
Propriété : animation-name
⚫ Spécifie la / les animation (s) à appliquer à
l'élément CSS.
Syntaxe :
⚫
Valeurs :
chaine de caractère sans espaces
Propriété : animation-iteration-count
Spécifie la / les animation (s) à appliquer à l'élément CSS.
Syntaxe :
Valeurs :
⚫ Nombre
⚫ infinite
⚫ initial
⚫ inherit
Animation : syntaxe
⚫ - Les propriétés facultatives peuvent être rajouté
Animation : kayframe syntaxe
⚫ animation-name: nom de l’animation
⚫ keyframe-location : Il peut s'agir de pourcentages
compris entre 0 et 100% ou dans le cas d'animations ne
comportant que deux points de cheminement, les mots
clés «for» et «to».
⚫ css-properties: les propriétés CSS qui seront amenés à
changer tout au long de l'animation. Toutes les propriétés
CSS ne sont pas “animables”
Animation : exemple
Animation : valeurs par default des
propriétés