Un guide d'introduction aux transitions CSS

Les transitions CSS sont le moyen le plus simple de créer une animation en CSS. Dans une transition, vous changez la valeur d'une propriété, et vous dites à CSS de la changer lentement en fonction de certains paramètres, vers un état final

Introduction aux transitions CSS

Les transitions CSS sont le moyen le plus simple de créer une animation en CSS.

Dans une transition, vous changez la valeur d'une propriété, et vous dites à CSS de la changer lentement en fonction de certains paramètres, vers un état final.

Les transitions CSS sont définies par ces propriétés:

Biens Description
transition-property la propriété CSS qui doit faire la transition
transition-duration la durée de la transition
transition-timing-function la fonction de chronométrage utilisée par l'animation (valeurs communes: linéaire, facilité). Par défaut: facilité
transition-delay nombre optionnel de secondes à attendre avant de démarrer l'animation

Letransitionpropriété est un raccourci pratique:

.container {
  transition: property duration timing-function delay;
}

Exemple de transition CSS

Ce code implémente une transition CSS:

.one,
.three {
  background: rgba(142, 92, 205, 0.75);
  transition: background 1s ease-in;
}

.two, .four { background: rgba(236, 252, 100, 0.75); }

.circle:hover { background: rgba(142, 92, 205, 0.25); /* lighter */ }

Voir l'exemple sur Glitchhttps://glitch.com/edit/#!/flavio-css-transitions-example

En survolant le.oneet.threeéléments, les cercles violets, il y a une animation de transition qui facilite le changement de fond, alors que les cercles jaunes ne le font pas, car ils n'ont pas letransitionpropriété définie.

Valeurs de la fonction de synchronisation de transition

transition-timing-functionpermet de spécifier la courbe d'accélération de la transition.

Vous pouvez utiliser quelques valeurs simples:

Évaluer
linéaire
facilité
facilité dans
facilité
facilité d'entrée

Ce glitchmontre comment ceux-ci fonctionnent dans la pratique.

Vous pouvez créer une fonction de chronométrage entièrement personnalisée en utilisantcourbes de Bézier cubiques. C'est plutôt avancé, mais fondamentalement, l'une de ces fonctions ci-dessus est construite à l'aide de courbes de Bézier. Nous avons des noms pratiques car ils sont courants.

Transitions CSS dans les outils de développement du navigateur

LeNavigateur DevToolsoffrent un excellent moyen de visualiser les transitions.

C'est Chrome:

Debug CSS Transitions in Chrome DevTools

C'est Firefox:

Debug CSS Transitions in Firefox DevTools

À partir de ces panneaux, vous pouvez modifier en direct la transition et expérimenter directement dans la page sans recharger votre code.

Quelles propriétés vous pouvez animer à l'aide des transitions CSS

Beaucoup! Mais pas toutes les propriétés CSS.

Voici la liste complète:

Biens
Contexte
Couleur de l'arrière plan
position-arrière-plan
taille de fond
frontière
couleur de la bordure
largeur de la bordure
Bordure du bas
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
bordure gauche
bordure-gauche-couleur
border-left-width
rayon de la frontière
frontière droite
border-right-color
border-right-width
espacement des bordures
haut de la frontière
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
bas
boîte ombre
couleur caret
agrafe
Couleur
nombre de colonnes
écart de colonne
règle de colonne
Colonne-règle-couleur
largeur de règle de colonne
largeur de colonne
Colonnes
teneur
filtre
fléchir
flex-base
Flex-Grow
flex-shrink
Police de caractère
taille de police
ajustement de la taille de la police
étirement de la police
poids de la police
zone de grille
grille-auto-colonnes
grille-auto-flow
grid-auto-rows
grille-colonne-fin
grille-colonne-espace
grille-colonne-début
grille-colonne
écart de grille
fin de ligne de grille
grid-row-gap
grille-ligne-début
ligne de grille
zones de modèle de grille
grille-modèle-colonnes
grid-template-rows
grille-modèle
la grille
la taille
gauche
l'espacement des lettres
hauteur de la ligne
marge
marge-bas
marge gauche
marge droite
margin-top
hauteur maximum
largeur maximale
hauteur min
largeur min
opacité
ordre
contour
couleur du contour
contour-offset
contour-largeur
rembourrage
rembourrage en bas
padding-left
padding-right
rembourrage
perspective
perspective-origine
devis
droit
tab-size
texte-décoration
texte-décoration-couleur
retrait du texte
ombre de texte
Haut
transformer.
alignement vertical
visibilité
largeur
espacement des mots
z-index

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: