Les animations dans une page Web peuvent attirer plus d'utilisateurs. Posez-vous la question suivante: si vous voyiez une page Web qui contient un peu d’animation, ne voudriez-vous pas en explorer davantage? Désormais, avec les transitions CSS, vous pouvez donner vie à votre travail avec de superbes animations. Et, remarquez, cela doit être fait correctement. Explorons le monde des transitions CSS dans l'ordre suivant:
- Pourquoi CSS Transitions?
- La propriété Transition
- Que devez-vous spécifier?
- La propriété de la fonction Transition-timing-function
- La propriété Transition-Delay
Pourquoi CSS Transitions?
Prenons un exemple. Si vous deviez changer la couleur d'un élément du blanc au bleu, ce changement est presque instantané. Pour un effet plus animé, vous pouvez effectuer cette modification progressivement. Cela semble également très attrayant. En activant les transitions CSS, vous pouvez personnaliser la façon dont les modifications se produisent. Vous pouvez définir comment les modifications des éléments se produisent à des intervalles de temps spécifiques qui suivent une courbe d'accélération.
Les transitions CSS vous permettent de définir les changements pour éléments, les intervalles de temps spécifiques, la vitesse de la courbe d'accélération et bien plus encore. Vous pouvez faire tout cela sans utiliser Flash ou JavaScript .
Pour une meilleure compréhension, vous pouvez vous référer à l'image ci-dessous:
CV de développeur python d'entrée de gamme
Dans l'image ci-dessus, l'élément HTML passera du rouge au bleu en une seconde. Vous verrez également la couleur intermédiaire lors de la transition. Si vous n'utilisez pas de transitions CSS, vous remarquerez que le changement de couleur du rouge au bleu est instantané - vous ne verrez pas la couleur intermédiaire. Avec les transitions CSS, vous remarquerez un effet animé lorsque les éléments HTML passent de l'ancien état au nouveau.
La propriété Transition
Vous pouvez utiliser la propriété de transition abrégée pour contrôler les transitions CSS. L'utilisation de ce raccourci n'est pas seulement facile, mais elle peut également éviter des paramètres désynchronisés qui peuvent être assez frustrants à déboguer en CSS.
La propriété de transition spécifie les propriétés CSS auxquelles vous voulez l'effet de transition. Seules ces propriétés CSS sont animées.
Syntaxe:
transition:
En tant que débutant, vous pourriez rencontrer des difficultés pour utiliser la sténographie. Si vous pensez que l'utilisation du raccourci est un peu complexe pour vous en ce moment, vous pouvez spécifier les propriétés de transition séparément. Pour un élément HTML, vous pouvez spécifier les propriétés de transition une par une, comme indiqué dans l'exemple ci-dessous:
div {largeur: 100px hauteur: 100px background: lightblue transition-property: width transition-duration: 2s transition-timing-function: linear transition-delay: 1s} div: hover {width: 300px}Survolez la boîte
Dans l'exemple ci-dessus, nous avons spécifié les propriétés (propriété de transition, durée de transition, fonction de synchronisation de transition et délai de transition) et leurs valeurs séparément. Nous allons découvrir ces propriétés de transition sous peu.
Que devez-vous spécifier?
Il y a principalement deux choses que vous devez spécifier pour créer des transitions CSS: la propriété CSS qui souhaite ajouter un effet et la durée de cet effet.Vous devez garder une chose à l'esprit: lorsque vous ne spécifiez pas la durée, la transition prend la valeur par défaut de 0 , et il n’y aura aucun effet.
Prenons un exemple:
Le code ci-dessous définit un effet de transition de la propriété width pendant une durée de cinq secondes.
div {largeur: 100px hauteur: 100px arrière-plan: bleu transition: largeur 5s} div: hover {largeur: 600px}Déplacez le curseur sur l'élément div ci-dessus pour voir l'effet de transition.
Dans le code ci-dessus, vous verrez que lorsque vous passez votre curseur sur la case bleue, la case bleue augmente sa largeur progressivement pour une durée de cinq secondes. Vous remarquerez également que lorsque vous supprimez le curseur de la boîte bleue, la boîte bleue reviendra progressivement à sa taille d'origine (pas instantanément). Vous pouvez également modifier les valeurs de largeur et de durée pour voir comment cette propriété de transition affecte l'élément HTML.
Vous pouvez également ajouter l'effet de transition à plusieurs propriétés. Vous pouvez le faire en utilisant des virgules pour séparer les propriétés. Prenons un exemple:
Dans le code ci-dessous, la propriété de transition est spécifiée pour la largeur, la hauteur et la transformation.
div {padding: 15px largeur: 150px hauteur: 100px fond: green transition: width 2s, height 2s, transform 2s} div: hover {width: 300px height: 200px transform: rotate (360deg)} Bonjour le monde (Survolez moi)
Avec l'exemple ci-dessus, vous verrez comment la boîte verte se déplace lorsque vous survolez la boîte.
Nous n'avons spécifié que la propriété et la durée. Voyons les autres paramètres avec divers exemples.
La propriété de la fonction Transition-timing-function
Cette propriété définit la courbe de vitesse de l'effet de transition. Il peut prendre les valeurs suivantes:
- Valeur de facilité: Il s'agit de la valeur par défaut où l'effet est lent au début, puis plus rapide et se termine lentement.
- Valeur linéaire: Cet effet ne fait pas varier la vitesse de la transition - il maintient la vitesse constante du début à la fin.
- Valeur de facilité: Cet effet commence lentement.
- Valeur de facilité: Cet effet a une fin lente.
- Valeur de facilité d'entrée: Cet effet a un démarrage lent ainsi qu'une fin lente.
- Valeur cubique-bezier (n, n, n, n): Vous pouvez spécifier votre propre ensemble de valeurs dans la fonction cubic-bezier.
Le code ci-dessous montre les effets de transition pour les valeurs linéaire, facilité, facilité d'entrée, facilité de sortie et facilité de sortie.
div {largeur: 100px hauteur: 100px arrière-plan: rose transition: largeur 2s} # div1 {transition-timing-function: linear} # div2 {transition-timing-function: easy} # div3 {transition-timing-function: easy-in } # div4 {transition-timing-function: easy-out} # div5 {transition-timing-function: easy-in-out} div: hover {width: 300px}Survolez les éléments div ci-dessous
linéaire
facilité
facilité dans
facilité
facilité d'entrée
comment implémenter une liste chaînée en c
La propriété Transition-Delay
Parfois, vous souhaitez qu'une animation se produise après une certaine durée. La propriété transition-delay vous permet de spécifier le délai d'un effet de transition. Vous pouvez spécifier le délai en secondes.
Prenons un exemple pour voir le retard de l’effet de transition:
div {largeur: 100px hauteur: 100px arrière-plan: jaune transition: largeur 3s transition-delay: 1s} div: hover {width: 300px}Survolez l'élément div ci-dessous
Remarque: Vous pouvez observer que 1 seconde de délai avant le début de l'effet
Dans le code ci-dessus, lorsque vous survolez la case jaune avec votre curseur, vous remarquerez (pendant une seconde) qu'il n'y a aucun effet. Après une attente d'une seconde, vous remarquerez l'effet.
Avec cela, nous arrivons à la fin de cet article sur les transitions CSS. Vous pouvez maintenant ajouter des animations à vos pages Web. Essayez ces exemples.
Découvrez notre qui s'accompagne d'une formation en direct animée par un instructeur et d'une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.
Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires du blog «CSS Transition» et nous vous recontacterons.