5.1 Changer la couleur
Les transitions CSS permettent d'animer les changements de propriétés des éléments, créant ainsi des effets visuels fluides. Maintenant, on va voir comment utiliser les transitions pour changer la couleur, la taille et la position des éléments, et on va aussi montrer des exemples pratiques.
Changer la couleur d'un élément avec les transitions CSS est l'une des utilisations les plus courantes. Ça peut inclure le changement de la couleur du texte, de l'arrière-plan ou des bordures de l'élément.
Exemple 1: Changer la couleur de l'arrière-plan
Ce exemple montre comment l'arrière-plan d'un élément change de couleur quand on le survole avec la souris :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changer la couleur de l'arrière-plan</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: background-color 1s ease;
}
.box:hover {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
.box: élément avec dimensions fixes et couleur de fond.box:hover: quand on survole l'élément avec la souris, la couleur de fond change doucement de bleu à vert en 1 seconde avec une fonction de timing ease
Exemple 2: Changer la couleur du texte
Ce exemple montre comment la couleur du texte change quand on le survole avec la souris :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changer la couleur du texte</title>
<style>
.text {
font-size: 24px;
color: #e74c3c;
transition: color 0.5s linear;
}
.text:hover {
color: #8e44ad;
}
</style>
</head>
<body>
<div class="text">Passe la souris sur moi!</div>
</body>
</html>
Explication du code :
.text: élément avec couleur de texte initiale.text:hover: quand on survole l'élément avec la souris, la couleur du texte change doucement de rouge à violet en 0.5 seconde avec une fonction de timing linéaire
5.2 Changer la taille
Changer la taille des éléments avec les transitions CSS peut inclure la modification de la largeur, de la hauteur ou des deux dimensions simultanément.
Exemple 1: Changer la largeur
Ce exemple montre comment la largeur d'un élément change quand on le survole avec la souris :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changer la largeur</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
.box: élément avec largeur initiale de 100 pixels-
.box:hover: quand on survole l'élément avec la souris, la largeur de l'élément augmente doucement à 200 pixels en 2 secondes avec une fonction de timingease-in-out
Exemple 2: Changer la hauteur
Ce exemple montre comment la hauteur d'un élément change quand on le survole avec la souris :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changer la hauteur</title>
<style>
.container {
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: height 1.5s ease;
}
.box:hover {
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Explication du code :
.box: élément avec hauteur initiale de 100 pixels.box:hover: quand on survole l'élément avec la souris, la hauteur de l'élément augmente doucement à 200 pixels en 1.5 seconde avec une fonction de timingease
5.3 Changer la position
Changer la position des éléments avec les transitions CSS peut inclure le déplacement d'un élément en utilisant les propriétés
top, right, bottom, left ou les transformations translate.
Exemple 1: Déplacement en utilisant left
Ce exemple montre comment un élément se déplace vers la droite quand on le survole avec la souris en utilisant la propriété left :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Déplacement de l'élément</title>
<style>
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: left 2s;
left: 0;
}
.box:hover {
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explication du code :
.box: élément avec position initialeleft: 0.box:hover: quand on survole l'élément avec la souris, l'élément se déplace doucement vers la droite de 100 pixels en 2 secondes
Exemple 2: Déplacement en utilisant transform: translate
Ce exemple montre comment un élément se déplace vers la droite et vers le bas quand on le survole avec la souris en utilisant la transformation translate :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Déplacement avec transform: translate</title>
<style>
.container {
height: 150px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 1s;
transform: translate(0, 0);
}
.box:hover {
transform: translate(100px, 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
Explication du code :
.box: élément avec transformation initialetranslate(0, 0).box:hover: quand on survole l'élément avec la souris, l'élément se déplace doucement de 100 pixels à droite et 50 pixels vers le bas en 1 seconde
GO TO FULL VERSION