logo oujood
🔍

Déterminer le mouvement de l'animation pendant les transitions : La propriété css animation-timing-function

En d'autres termes, elle est utilisée pour déterminer le mouvement de l'animation pendant les transitions.

OUJOOD.COM

Définition et utilisation da la propriété css animation-timing-function

La propriété animation-timing-function détermine la courbe de vitesse d'une animation.

La courbe de vitesse définit le TEMPS qu'une animation utilise pour passer d'un ensemble de styles CSS à un autre.

La courbe de vitesse est utilisée pour effectuer les changements en douceur.

La Syntaxe CSS 
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
Valeurs par défautease
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.animationTimingFunction="linear"

Prise en charge de la propriété css animation-timing-function 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
Verssion43
4 -webkit-		1016
5 -moz-		9
4 -webkit-		30
15 -webkit-
12 -o-

Exemple    📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
	<title>
            CSS propriété animation-timing-function
        </title>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  border-radius:50%;
  position: relative;
  animation: mymove 5s infinite;
  animation-timing-function: linear;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 400px;}
}
</style>
</head>
<body>

<h1>oujood.com </h1>
<h2> La propriété css animation-timing-function </h2>
<div></div>

</body>
</html>

Changer la propriété css animation-timing-function avec JavaScript

Exemple    📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
	<title>
            CSS propriété animation-timing-function
        </title>
<style> 
div {
  width: 80px;
  height: 80px;
  background: red;
  border-radius: 50%;
  position: relative;
  animation: monAnimation 2s infinite;
}

@keyframes monAnimation {
  from {left: 0px;}
  to {left: 400px;}
}
</style>
</head>
<body>

<h1>Modifier le timing de l'animation avec JavaScript</h1>

<p>Cliquez sur le bouton "CHANGER" pour modifier le timing de l'animation :</p>
<button onclick="maFonction()"> CHANGER </button>

<script>
function maFonction() {
  document.getElementById("monDiv").style.animationTimingFunction = "linear";
}
</script>

<div id="monDiv"></div>

</body>
</html>

Valeurs de la propriété animation-timing-function

linear L'animation a la même vitesse du début à la fin
ease Valeur par défaut. L'animation a un début lent, puis rapide, avant de se terminer lentement.
ease-in L'animation a un démarrage lent
ease-out L'animation a une fin lente
ease-in-out L'animation a à la fois un démarrage et une fin lents.
step-start Équivalent à steps(1, start)
step-end Équivalent à steps(1, end)
steps(int,start|end) : Une fonction qui specifie le pas, elle prend deux paramètres. Le premier paramètre indique le nombre d'intervalles de la fonction. Il doit être un nombre entier positif (supérieur à 0). Le deuxième paramètre, qui est facultatif, a la valeur "start" ou "end", et spécifie le point auquel le changement de valeurs se produit dans l'intervalle. Si le deuxième paramètre est omis, il prend la valeur "end".
cubic-bezier(n,n,n,n)Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1
initial : On utilise cette propriété pour définir sa valeur par défaut.
inherit : Cette propriété est utilisée pour hériter de la propriété d'animation de son parent.

Pour mieux comprendre les différentes valeurs de la fonction de synchronisation ; voici cinq éléments <div> différents avec cinq valeurs différentes :

Exemple    📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
	<title>
            CSS propriété animation-timing-function
        </title>
<style> 
div {
  width: 100px;
  height: 100px;
  border-radius:50%;
  text-align:center;
  background: #85c5d9;
  font-weight: bold;
  position: relative;
  animation: monAnimation 5s infinite;
}

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes monAnimation {
  from {left: 0px;}
  to {left: 500px;}
}
</style>
</head>
<body>
<h1> Éléments ayant une fonction de synchronisation avec différentes Valeurs </h1>
<div id="div1"> <br>linear </div>
<div id="div2"><br>ease</div>
<div id="div3"><br>ease-in</div>
<div id="div4"><br>ease-out</div>
<div id="div5"><br>ease-in-out</div>

</body>
</html>

- Liste des propriétés css -