Tutoriel sur la propriété CSS transition-timing-function

OUJOOD.COM

Tutoriel sur la propriété CSS transition-timing-function

La propriété CSS transition-timing-function définit l'animation de transition utilisée lorsqu'un élément change de style suite à une transition. Elle contrôle l'accélération et le ralentissement de l'animation.

Syntaxe générale de la propriété CSS transition-timing-function

La syntaxe générale pour la propriété transition-timing-function est :

    transition-timing-function: valeur;

Valeurs par défaut	ease
Inherited:	non
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.transitionTimingFunction="linear"

Valeurs possibles de la propriété CSS transition-timing-function

Voici quelques valeurs possibles pour la propriété transition-timing-function :

ease: animation accélérée au début et ralentie à la fin (valeur par défaut)
linear: animation linéaire constante
ease-in: animation accélérée au début
ease-out: animation ralentie à la fin
ease-in-out: animation accélérée au début et ralentie à la fin
cubic-bezier(n, n, n, n): utilise une fonction de courbe de Bézier personnalisée avec des valeurs entre 0 et 1

Exemples pratiques d'utilisation de la propriété CSS transition-timing-function

Voici un exemple pratique d'utilisation de la propriété transition-timing-function :

Exemple : 📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété transition css</title> 
  <style> 
  .conteneur {width: 200px;
height: 100px;
background-color: lightblue;
transition: all 1s;
transition-timing-function: ease;
} .conteneur:hover {width: 400px;
height: 200px;
background-color: lightgreen;
} </style>
</head>
<body>

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

Ce qui donne

Survoler moi avec la souri

Survolez l'élément ci-dessus pour observer l'effet de transition avec différentes valeurs de transition-timing-function.

Utilisation de steps() et de courbes de Bézier

La fonction steps() vous permet de spécifier des intervalles pour la fonction de synchronisation. Elle prend un ou deux paramètres, séparés par une virgule : un nombre entier positif et une valeur facultative (start ou end). Si aucun second paramètre n'est inclus, la valeur par défaut sera end.

Pour comprendre les fonctions de pas, voici une démo qui utilise steps(4, start) pour la boîte de gauche, et steps(4, end) pour la boîte de droite (survolez une boîte pour voir les transitions) :

Exemple : 📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété transition-timing-function css</title> 
  <style> 
  .box {
  -webkit-transition-timing-function: steps(4, start);
  -moz-transition-timing-function: steps(4, start);
  -o-transition-timing-function: steps(4, start);
  transition-timing-function: steps(4, start);
}

.box-2 {
  -webkit-transition-timing-function: steps(4, end);
  -moz-transition-timing-function: steps(4, end);
  -o-transition-timing-function: steps(4, end);
  transition-timing-function: steps(4, end);
}

.box:hover, .box-2:hover {
  background-color: lightblue;
  cursor: pointer;
}

.uni {
  box-sizing: border-box;
  float: left;
  border: solid 1px black;
  width: 150px;
  height: 150px;
  background: goldenrod;
  margin-top: 20px;
  margin-left: 2px;
  -webkit-transition-duration: 3s;
  -moz-transition-duration: 3s;
  -o-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
}

.wrap {
  width: 304px;
  overflow: hidden;
  margin: auto;
}
</style>
</head>
<body>

<h1>La propriété css transition-timing-function </h1> <br>
<div class="wrap">
  <div class="box uni"></div>
  <div class="box-2 uni"></div>
</div>
</body>
</html>

Lorsque le début est spécifié, le changement de valeurs se produit au début de chaque intervalle, tandis que la fin entraîne le changement de valeurs à la fin de chaque intervalle.

Un examen détaillé des valeurs des courbes de Bézier dépasse le cadre de cette référence. Toutefois, les références de la section des liens connexes proposent des outils qui démontrent visuellement le fonctionnement de ces valeurs.

Pour des raisons de compatibilité avec tous les navigateurs compatibles, les préfixes des fournisseurs sont nécessaires, la syntaxe standard étant déclarée en dernier.

Exemple avec les different valeurs de la propriété css transition-timing-function

La fonction transition-timing décrit comment l’animation se déroulera au fil du temps. Des mots-clés peuvent être utilisés comme valeurs et que nous avons vu ci-dessus. La fonction de Bézier peut être donnée pour un contrôle complet de la fonction de transition.

Plutôt que d’essayer de comprendre ce que toutes ces valeurs signifient, examinons les valeurs de mots-clés pour cette propriété. Dans l’exemple ci-après déplacez votre souris sur les boîtes et elles devraient toutes décoller dans une course à travers la page.

Exemple : 📋 Copier le code

lt;!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété transition-timing-function css</title> 
  <style> 
  .stable {
    position: relative;
	width:auto;
    height: 320px;
	background-color:#4fbde1;
  }
  .stable .balloon {
    position: absolute;
    bottom: 0;
    width: 80px;
    height: 100px;
	border-radius: 50%;
	margin:1em;
	padding:5em 0 0 0.5em;
	font-weight: 800;
    color: white;
  }
  .stable:hover .balloon {
    bottom: 157px;
    transition-duration: 3s;
  }

  .stable .balloon.default {
    left: 39px;
    background-color: blue;
  }
  .stable .balloon.linear {
    left: 149px;
	background-color: red;
    transition-timing-function: linear;
  }
  .stable .balloon.ease-in {
    left: 259px;
	background-color: green;
    transition-timing-function: ease-in;
  }
  .stable .balloon.ease-out {
    left: 369px;
	background-color: yellow;
	color:black;
    transition-timing-function: ease-out;
  }
  .stable .balloon.ease-in-out {
    left: 479px;
	background-color: pink;
    transition-timing-function: ease-in-out;
  }
  .stable .balloon.cubic-bezier {
    left: 589px;
	background-color: maroon;
    transition-timing-function: cubic-bezier(0,1,1,0);
  }
</style>
</head>
<body>

<h1>La propriété css transition-timing-function </h1> <br>
<div class="stable">
<div class="balloon default">default</div>
<div class="balloon linear">linear</div>
<div class="balloon ease-in">ease-in</div>
<div class="balloon ease-out">ease-out</div>
<div class="balloon ease-in-out">ease-in-out</div>
<div class="balloon cubic-bezier">cubic-bezier</div>
</div>
</body>
</html>

Cet extrait de code HTML et CSS présente un exemple d'utilisation de la propriété CSS transition-timing-function pour contrôler la façon dont une animation se déroule au fil du temps. La fonction transition-timing-function définit la courbe d'accélération de l'animation, ce qui signifie comment elle progresse au fil du temps.

Dans l'exemple donné, il y a une section avec des ballons de différentes couleurs qui décollent lorsque vous survolez la section avec votre souris. Chaque ballon a une valeur de transition-timing-function différente pour contrôler sa progression lorsqu'il flotte du bas de la boîte vers le haut.

Voici les différentes valeurs de transition-timing-function utilisées dans cet exemple :

linear: Cette valeur spécifie une progression linéaire de l'animation, ce qui signifie que la vitesse reste constante tout au long de l'animation.
ease-in: Cette valeur spécifie une progression d'accélération, ce qui signifie que l'animation démarre lentement et accélère au fur et à mesure.
ease-out: Cette valeur spécifie une progression de décélération, ce qui signifie que l'animation démarre rapidement et ralentit progressivement.
ease-in-out: Cette valeur spécifie une progression d'accélération suivie d'une décélération, ce qui signifie que l'animation démarre lentement, accélère au milieu, puis ralentit à la fin.
cubic-bezier: Cette valeur permet de définir une fonction de transition personnalisée en utilisant les coordonnées d'une courbe de Bézier. Dans l'exemple donné, la valeur cubic-bezier(0,1,1,0) est utilisée, ce qui provoque une pause à mi-chemin de l'animation.

Ces différentes valeurs de transition-timing-function permettent de contrôler la façon dont une animation se déroule, en ajoutant de l'intérêt visuel et en ajustant la vitesse et l'accélération de l'animation.

Astuces et conseils d'utilisation de la propriété CSS transition-timing-function

Expérimentez avec différentes valeurs de transition-timing-function pour trouver l'effet de transition souhaité.
Utilisez des fonctions de courbe de Bézier personnalisées pour des animations plus avancées.
Combinez la propriété transition-timing-function avec d'autres propriétés de transition CSS pour créer des transitions complexes.

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.

Explorateur
Verssion	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

Liste des propriétés css

Voir aussi :

Tutoriel CSS : tout ce que vous devez savoir sur la propriété transition-timing-function

OUJOOD.COM