HTML5 - Transitions

Les transitions appartiennent à une nouvelle série d'effets qui sont incorporés dans HTML5 et qui peut être ajusté avec CSS3Auparavant, ce type d'effets devait être effectué par Javascript en utilisant l'une des nombreuses bibliothèques et frameworks disponibles (Mootools, Jquery, etc.), mais lorsque la nouvelle norme a été introduite, de tels effets ont été incorporés, tels que des transitions, des animations, des transformations . . .
Utiliser des transitions
Avant de voir comment utiliser une transition, nous devons savoir de quoi il s'agit. Nous savons que lorsque nous appliquons un changement avec la propriété : survoler lorsque vous passez la souris sur l'élément, il prend immédiatement le style attribué lorsque la souris est dessus, une transition n'est rien de plus qu'un contrôle sur la manière dont ce changement va être effectué, c'est-à-dire la durée du changement, la vitesse à laquelle qui va être réalisée, afin d'obtenir un effet comme un mélange entre l'ancien et le nouvel état.
Nous pouvons résumer alors que la transition est le passage d'un état à un autre au sein du document HTML et toutes les propriétés avec lesquelles ce changement peut être effectué, dans l'image suivante nous voyons un état initial et un état final, la transition est ce qui se passe Entre les deux.
AGRANDIR
Propriétés de transition
Voyons les propriétés et les attributs que nous pouvons utiliser pour effectuer une transition :

• délai de transition : Spécifie un délai en unité de temps après lequel l'application d'effet démarre.
• transition-durée : Spécifie la durée pendant laquelle la transition doit avoir lieu.
• propriété de transition : Spécifie à quelle propriété la transition doit être appliquée.
• fonction de synchronisation de transition : Spécifie la manière dont les valeurs intermédiaires seront traitées lors de l'exécution de la transition.
• transition: C'est le raccourci avec lequel nous pouvons appliquer toutes les propriétés de la transition dans une seule déclaration CSS. Elle peut être résumée comme suit : transition :

Nous devons souligner que délai de transition Oui transition-durée utiliser des unités de temps comme valeurs, doit donc être spécifié avec s secondes ou Mme millisecondes.
Voyons un exemple de la façon de faire une transition pour un élément dans HTML5, voyons le code suivant :

 Exemple
Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.

Comme nous pouvons le voir, nous avons implémenté les différentes propriétés de l'élément de transition en utilisant le préfixe -webkit, cela nous assure qu'il sera rempli pour les navigateurs Chrome Oui Safari, de les mettre en œuvre pour Firefox Oui Opéra nous devons également inclure les préfixes -moz et -o.
On peut aussi remarquer que l'on fixe le retard en 100ms ce qui veut dire qu'il aura un petit délai avant de commencer la transition, alors toute la durée de l'effet devrait durer 500ms ce qui est établi dans durée.
Voyons une image avec toutes les phases de l'effet :
AGRANDIR
Comme nous pouvons le voir, la transition fait que l'effet s'applique progressivement pendant le temps spécifié.
Avec cela, nous terminons le didacticiel sur la façon d'appliquer l'effet de transition à un élément dans HTML5, nous devons continuer à nous entraîner jusqu'à ce qu'il devienne naturel de placer le code requis pour que nos documents et nos pages atteignent un plus grand dynamisme.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif