CSS Transition plusieurs propriétés

«La transition est définie lorsque certains objets changent d'un état à un autre ou d'avoir une animation. Lorsque nous appliquons des transitions sur n'importe quel élément de CSS, il contrôlera la vitesse d'animation. Lorsque nous voulons modifier la taille d'un objet, et lorsque nous voulons changer la vitesse de l'objet après l'avoir en plane, nous utilisons la propriété de transition dans CSS. Nous avons différentes propriétés de transition dans CSS. Nous pouvons définir la largeur, la hauteur et l'heure de l'animation à l'intérieur de la propriété de transition. Nous pouvons également définir le calendrier de retard dans cette propriété de transition. En d'autres termes, c'est le mouvement de l'objet lorsque la souris est déclenchée sur cet objet. Dans ce tutoriel, nous démontrerons le concept de propriété de transition dans CSS. Nous utiliserons les propriétés de transition ici dans ce tutoriel et vous les expliquerons."

Exemple 1
Démarrez ce code en créant d'abord le fichier HTML. Nous ouvrons le nouveau fichier, puis sélectionnons le HTML comme langue dans Visual Studio Code; Nous devons mettre le «!"À l'intérieur du fichier que nous avons créé ici. Toutes les balises de base du HTML apparaissent dans ce fichier. Nous avons juste besoin de taper le corps du HTML et le lien du fichier CSS à l'intérieur de la «tête."Ici, dans le corps, nous créons d'abord une rubrique puis un paragraphe. Après ce paragraphe, nous créons une div vide ici. Nous utiliserons également ce code HTML dans nos prochains exemples. Maintenant, nous nous dirigerons vers le fichier CSS pour un codage supplémentaire. Nous appliquerons les propriétés de transition sur cette div dans le fichier CSS.

Tout d'abord, nous définissons le «div» et sa «largeur» est «100px» et «100px» pour la «hauteur."Ensuite, définissez son« arrière-plan »comme« violet."Le" Border-Radius "de cette div est" 50% ", donc il apparaîtra comme un cercle. Après toutes ces propriétés, nous allons appliquer la propriété de «transition» et mettre ici la «largeur» et les «2». Il applique l'effet de transition sur la largeur du div et anime pour 2sec. Après cela, nous utilisons le «survole» avec le «div», donc lorsque nous survons ce div, il changera sa largeur en «300px» car nous avons sélectionné «300px» comme «largeur."

La sortie de ce code montre comment la propriété de transition change dans la largeur de l'élément div. Vous pouvez voir dans cette vidéo donnée que sa largeur augmente lorsque nous volons la souris sur ce cercle div. Lorsque la souris n'est pas sur cet élément, il reviendra à la position d'origine.

Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / transition-property-profile-1-microsoft -edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Utilisez les touches de flèches USP / Down pour augmenter ou diminuer le volume.

Exemple n ° 2
Ici, nous allons appliquer la propriété de transition à la largeur et à la hauteur. La «largeur» de la div est «120px», et la «hauteur» est également la même «120px». Le «fond» de la div est en couleur «orange», et son «rayon de bordure» est «30%» dans cet exemple. Nous utilisons ici la propriété «transition», ce qui modifie sa «largeur» avec une durée de «2S» et modifie sa «hauteur» avec une durée de temps de «4S». Toutes ces transitions sont appliquées lorsque nous déclenchons la souris sur cet élément div. Nous utilisons également le «div.volant », dans lequel nous définissons la« largeur »et la« hauteur »de l'élément div après avoir plané. Nous avons réglé le «320px» pour la «largeur» lorsque nous en survenons et le
«Hauteur» de 320px ».

Dans cette vidéo donnée, vous pouvez voir la sortie de cet exemple. Vous pouvez voir que lorsque nous planons sur cet élément div, il modifie sa largeur ainsi que sa hauteur car nous définissons à la fois la largeur et la hauteur dans la propriété de transition CSS.

Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / transition-property-profile-1-microsoft -edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Utilisez les touches de flèches USP / Down pour augmenter ou diminuer le volume.

Exemple n ° 3
Ici, nous allons utiliser toutes les propriétés de transition séparément sur le div. Nous définissons d'abord la «largeur» et la «hauteur», et les deux sont en «130px». Ensuite, nous choisissons «rose» comme «fond» du div. Son «rayon frontalier» est «20%». Maintenant, nous avons les propriétés de transition ici. Tout d'abord, nous définissons la «transition-property» et donnons le nom sur lequel la transition est utilisée. Donc, ici, nous définissons la «largeur» dans cette propriété. Nous allons définir le temps dans des propriétés de transition distinctes. Pour définir le temps de transition, nous utilisons la propriété «transition-durée» et donnons le temps ici dans cette propriété. Nous définissons «2s» pour cette «property de durée."

Après cela, nous avons la propriété «transition-timing-fonction». Cette propriété est utilisée ici pour spécifier la vitesse de la transition. Ici, nous le définissons comme «linéaire», ce qui signifie que la vitesse d'effet de transition sera la même du début à la fin. Ensuite, nous appliquons également un certain retard à cette transition en utilisant la propriété «transition-retard». Nous définissons cette valeur de propriété comme «1s». Il produira un retard de «1 seconde» pour l'effet de transition. Nous utilisons toutes les propriétés de transition ici dans ce code séparément. Après tout cela, nous avons réglé la «largeur» de la div lorsque nous planons dessus. Après avoir plané, il change sa largeur en «350px».

La sortie est affichée ici dans la vidéo. Vous pouvez voir que lorsque nous volons la souris sur cette div, il prend un délai de 1 seconde, puis applique la transition sur sa largeur, et la largeur change de manière linéaire, ce qui signifie à une vitesse constante du début à la fin.

Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / transition-property-profile-1-microsoft -edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Utilisez les touches de flèches USP / Down pour augmenter ou diminuer le volume.

Exemple n ° 4
Dans cet exemple, nous utilisons la propriété raccourci de toutes les propriétés que nous avons utilisées dans notre exemple précédent 3 dans ce tutoriel. La «largeur» et la «hauteur» sont définies ici comme «150px» pour chacun, et le «fond» est «rose."Ensuite, nous utilisons la propriété scolarisée de la transition dans laquelle nous spécifions la« transition-property », la« durée de transition », la« transition de transition et le «retard de transition» dans une propriété «transition». Ici, la «largeur» spécifie que la transition est appliquée sur la «largeur» de la div, et la durée de la transition est «2S» et dans la fonction de synchronisation «linéaire» de la transition et un retard de 1 sec dans la transition. Toutes ces propriétés sont définies ici dans une propriété. Ainsi, il est également appelé la propriété raccourci de la transition. Nous avons également réglé la «largeur» de cette div après avoir surbout sur la souris.

La vidéo de sortie montre que lorsque nous déplaçons la souris à ce sujet, il prend un délai de 1 seconde avant d'appliquer la transition à sa largeur, ce qui change linéairement du début à la fin.

Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / transition-property-profile-1-microsoft -edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Utilisez les touches de flèches USP / Down pour augmenter ou diminuer le volume.

Exemple n ° 5
Nous créons ici plusieurs éléments div avec différents noms et appliquera différentes propriétés de fonction de transition de transition à tous ces éléments. Nous créons cinq éléments div différents ici dans ce code.

La «largeur» et la «hauteur» de tous les éléments div sont «100px» pour chaque. Nous appliquons la «transition» sur la «largeur» dans la durée de «2S». Nous alignons également le texte qui est écrit à l'intérieur de la div au «centre» en utilisant la propriété «Text-Align» et en définissant «Bold» pour ce «poids de police."Ensuite, nous allons mentionner la première div avec l'aide du nom de la div et utiliser la propriété« transition-timering-fonction »pour cette div, et définir« linéaire »pour cette div. Donc, cela montre la même vitesse du début à la fin. Le «fond» de «div1» est «rouge."

Pour la deuxième div, «Div2», nous utilisons «Facilité» pour la «transition-timeing-fonction.«Cette« facilité »commencera la transition lentement, puis rapidement et se termine lentement. Le «fond» de «div2» est «vert."Pour le troisième div," Div3 ", nous utilisons un fond" bleu ", et nous définissons" facilité "comme valeur de la" transition-idiot.«Le« facilité »est utilisé pour faire démarrer l'effet de transition lentement. La quatrième div a un «fond jaune» «fond» et «facilité» pour cette propriété. La transition «facilité» se termine lentement. La dernière div utilise «faciliter» dans «transition-timering-fonction» et commencera et finira lentement. De plus, le «fond» de la dernière div est «Maroon."

Dans la vidéo, nous avons cinq éléments div différents avec différents «fonctions de transition-timng» et vous pouvez remarquer dans cette vidéo que le moment de la transition de tous les éléments div est différent.

Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / transition-property-profile-1-microsoft -edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Utilisez les touches de flèches USP / Down pour augmenter ou diminuer le volume.

Conclusion

Nous avons fourni ce tutoriel expliquant le concept des propriétés de transition dans CSS. Nous avons couvert ce sujet en détail dans ce tutoriel. Nous avons expliqué la transition-property, la durée de transition, les propriétés de transition de transition et les propriétés de relais de transition séparément et la propriété raccourci de ces propriétés ici. Nous avons dépassé cinq exemples différents et avons fourni les sorties vidéo afin de vérifier comment cette propriété fonctionne. J'espère que vous comprenez les multiples propriétés de transition dans CSS et que vous le ferez vous-même.