Comment régler la hauteur de transition dans CSS

Dans les applications Web, il est nécessaire de transmettre efficacement le message. Les développeurs livrent leurs concepts à leurs téléspectateurs d'une meilleure manière en utilisant des animations. Pour configurer différentes propriétés de l'animation, comme les états et la vitesse, des transitions sont utilisées. Dans CSS, les transitions aident à appliquer divers effets sur les éléments HTML comme la durée et le retard.

Comment régler la hauteur de transition dans CSS?

Dans CSS, la hauteur de transition peut être définie en utilisant les propriétés suivantes:

• propriété de transition
• se transformer avec la propriété de transition

Alors, commençons par la méthode un!

Méthode 1: Définissez la hauteur de transition à l'aide de la propriété de transition CSS

UN "transition"Est un délai défini en spécifiant l'état initial et final d'un élément. Il s'agit de la propriété raccourci de toutes les propriétés de transition à la main, telles que la durée de transition ou la property de transition.

Passons de l'avant et prenons un exemple pour comprendre comment la propriété de transition peut être utilisée pour définir la hauteur de transition.

Exemple 1

Dans le fichier HTML, spécifiez le «”Entre les balises.

Html

Tout d'abord, nous spécifierons le «Couleur de l'arrière plan«Propriété avec valeur»orange". Ensuite, affectez les propriétés de hauteur et de largeur avec des valeurs "100px" et "50px". Maintenant, définissez le «transition»Propriété avec le«hauteur 1" valeur; Hauteur 1S Spécifie que l'élément effectuera l'action attribuée en une seconde dans une direction verticale.

À l'étape suivante, nous utiliserons le sélecteur ":flotter”Avec Element div et définissez la propriété de hauteur comme«200px". Cela fera passer la ligne verticale de 100px à 200px lorsque nous planons notre pointeur sur l'élément.

CSS

div
Color en arrière-plan: orange;
hauteur: 100px;
Largeur: 50px;
Transition: hauteur 1s;

Div: Hover
hauteur: 200px;

Enregistrons le code mentionné et exécutons-le dans le navigateur:

Comme vous pouvez le voir dans la sortie ci-dessus, la hauteur de transition a été définie avec succès.

Méthode 2: Définissez la hauteur de transition à l'aide de la propriété CSS Transform

Les variations 2D ou 3D qui peuvent être implémentées sur les éléments HTML résultent du «transformer" propriété. Vous pouvez effectuer différentes actions en utilisant cette propriété, telle que l'échelle, les biais, la traduction et la rotation. Si vous n'êtes pas au courant de ces opérations mentionnées, consultez cet article dédié.

Exemple

Nous allons définir la valeur du «transformer«Propriété comme«Scaley (1)» Ici, l'échelle est utilisée pour ajuster un élément verticalement et passer "1"Comme son argument augmentera la hauteur. Nous allons définir le «originaire«Propriété avec la valeur»haut», Ce qui indique que la transformation sera appliquée à partir du point supérieur. Maintenant, nous donnerons à la propriété de transition une valeur "Transformer 1s, 1s», Où les premiers 1 sont pour la largeur, et l'autre est pour la hauteur; Cela spécifiera la transformation d'une seconde sur l'élément sélectionné.

Utilisez le sélecteur: en survol et attribuez la propriété de transformation une valeur "Scaley (1.1)". En conséquence, lorsque le pointeur est placé sur l'élément, sa taille augmentera respectivement.

CSS

div
Color en arrière-plan: orange;
hauteur: 100px;
Largeur: 50px;
transformée: échelle (1);
Transform-Origin: Top;
Transition: transformation 1s, 1s;

Div: Hover
hauteur: 200px;
transformée: échelle (1.1);

Sortir

Nous avons couvert comment régler la hauteur de transition dans CSS.

Conclusion

Pour définir la hauteur de transition, le «transition»La propriété peut être utilisée. Il faut la valeur des secondes comme argument pour effectuer une action spécifique pendant un certain temps. De plus, CSS "transformer«La propriété ainsi que la transition peuvent également être utilisées dans lesquelles vous devez spécifier l'échelle de transformation et l'origine pour obtenir les résultats souhaités. Ce guide montre toutes les méthodes efficaces pour définir la hauteur de transition dans CSS.