oujood.com

Un guide pratique pour utiliser efficacement la propriété CSS transition-duration

Découvrez tout ce que vous devez savoir sur la propriété CSS transition-duration, y compris sa définition, syntaxe, valeurs possibles, exemples pratiques d'utilisation et des astuces et conseils pour son utilisation efficace.

chercher |

Tutoriel : La propriété CSS transition-duration

Définition

La propriété CSS transition-duration spécifie la durée sur laquelle une transition doit s'effectuer lorsqu'un élément change d'état.

Syntaxe générale

La syntaxe générale de la propriété transition-duration est la suivante :

transition-duration: valeur;

valeur représente la durée de la transition, exprimée en secondes (s) ou en millisecondes (ms).

Valeurs par défaut0s
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.transitionDuration="1s"

Valeurs possibles

Les valeurs possibles pour la propriété transition-duration sont les suivantes :

  • valeur : une valeur numérique positive suivie de l'unité de temps (s ou ms).

Exemples pratiques d'utilisation

Voici un exemple d'utilisation de la propriété transition-duration :

Exemple :       Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété transition css</title> 
  <style>
.box {
  width: 200px;
  height: 100px;
  background-color: #eee;
  transition-property: background-color;
  transition-duration: 0.5s;
}

.box:hover {
  background-color: #ffcc00;
}
  </style>
</head>
<body>

<h1>La propriété css transition </h1> <br>
<div class="box">Survoler moi avec la souri</div>
</body>
</html>
Survoler moi avec la souri

Cet exemple applique une transition d'une durée de 0.5 seconde à la propriété background-color lorsqu'un survol de la souris est détecté sur l'élément avec la classe box.

Astuces et conseils d'utilisation

Voici quelques astuces et conseils pour une utilisation efficace de la propriété transition-duration:

  • Utilisez des valeurs appropriées pour la durée de la transition afin d'obtenir des effets visuels fluides sans que la transition paraisse trop lente ou trop rapide.
  • Expérimentez avec différentes durées pour trouver le timing optimal qui correspond à votre design et à l'effet souhaité.
  • Utilisez des valeurs de durée cohérentes sur l'ensemble de votre site ou application pour garantir une expérience utilisateur homogène.
  • Évitez de définir des durées de transition trop longues, car cela pourrait ralentir la réactivité de votre interface.
  • Envisagez d'utiliser des valeurs de durée variables pour différentes propriétés de transition afin de créer des effets d'animation plus complexes.
  • Combinez la propriété transition-duration avec d'autres propriétés de transition telles que transition-property et transition-timing-function pour contrôler davantage le comportement des transitions.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- , -moz- ou -o- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion26.0
4.0 -webkit-
10.016.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-


Voir aussi nos tutoriel :

fonction checkdate

Valide une date grégorienne

fonction similar_text, similar_text

Calcule la similarit de deux chaînes

fonction strrev, strrev

Inverse une chaîne