Propriété css animation-timing-function

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éfaut	ease
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.

Explorateur
	Verssion	43 4 -webkit-	10	16 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

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

Les propriétés CSS par ordre alphabétique

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

Prise en charge de la propriété css animation-timing-function dans les navigateurs

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

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

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

La méthode secrète likes sans fin sur Facebook