XPATH operateurs et fonction
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 finease 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>