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
- Exemple de transition CSS
- Valeurs de la fonction de synchronisation de transition
- Transitions CSS dans les outils de développement du navigateur
- Quelles propriétés vous pouvez animer à l'aide des transitions CSS
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 |
Letransition
proprié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.one
et.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 letransition
propriété définie.
Valeurs de la fonction de synchronisation de transition
transition-timing-function
permet 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:
C'est Firefox:
À 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:
- Le guide Flexbox
- Tutoriel CSS Grid
- Variables CSS (propriétés personnalisées)
- Introduction à PostCSS
- La propriété CSS margin
- Comment centrer un élément avec CSS
- Polices système CSS
- Comment imprimer votre HTML avec style
- Un guide d'introduction aux transitions CSS
- Un didacticiel sur les animations CSS
- Introduction au CSS
- Le guide CSS
- Comment configurer Tailwind avec PurgeCSS et PostCSS
- La feuille de triche de Tailwind
- Comment faire pivoter en continu une image en utilisant CSS
- Rendre un tableau réactif en utilisant CSS
- Comment déboguer CSS en divisant en deux
- Sélecteurs CSS
- Cascade CSS
- Spécificité CSS
- Sélecteurs d'attributs CSS
- Couleurs CSS
- Unités CSS
- URL CSS ()
- Typographie CSS
- Le modèle CSS Box
- La propriété de position CSS
- Requêtes multimédias CSS et conception réactive
- Requêtes de fonctionnalités CSS
- Transformations CSS
- Comment styliser des listes en utilisant CSS
- Préfixes de fournisseur CSS
- Héritage CSS
- Pseudo-classes CSS
- Pseudo éléments CSS
- Styliser les tableaux HTML avec CSS
- La propriété d'affichage CSS
- La fonction CSS calc ()
- Bordures CSS
- Importer un fichier CSS avec @import
- Gestion des erreurs CSS
- Filtres CSS
- Dimensionnement de la boîte CSS
- Arrière-plans CSS
- Commentaires CSS
- Polices CSS
- Remplissage CSS
- La propriété CSS float et la compensation
- Normalisation CSS
- La propriété CSS z-index
- Comment désactiver la sélection de texte à l'aide de CSS
- Comment mettre un élément au bas de son conteneur en utilisant CSS
- Comment inverser les couleurs en utilisant CSS
- Balises pré réactives en CSS
- Intégrations de vidéos YouTube réactives
- Quelles sont les bonnes valeurs CSS Breakpoint pour le Responsive Design?
- Comment aligner le centre dans Flexbox