oujood.com

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

La propriété animation-timing-function en CSS est utilisée pour spécifier comment l'animation effectue les transitions par le biais des images clés.
En d'autres termes, elle est utilisée pour déterminer le mouvement de l'animation pendant les transitions.

chercher |

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>

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

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web