Un guide d'introduction aux transitions CSS

• 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:

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:

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:

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