Maison >interface Web >tutoriel CSS >A quoi sert l'attribut animation-timing-function ?
A quoi sert l'attribut animation-timing-function ?
- 青灯夜游original
- 2019-01-31 11:01:333895parcourir
L'attribut animation-timing-function est utilisé pour définir la courbe de vitesse de l'animation. Il peut définir la vitesse d'animation à une vitesse constante, commencer à basse vitesse, terminer à basse vitesse, commencer et terminer à basse vitesse. vitesse, d'abord lente puis rapide puis ralentie, ou par elle-même Valeur personnalisée.
Propriété de fonction d'animation-timing-CSS3
Fonction :
animation-timing-function spécifie la courbe de vitesse de l'animation. La courbe de vitesse définit le temps nécessaire à l'animation pour passer d'un ensemble de styles CSS à un autre. Les courbes de vitesse sont utilisées pour rendre les changements plus fluides.
Syntaxe :
animation-timing-function: value;
Description :
animation-timing-function utilise le nom Cubic Bezier (Cubic Bezier ) fonction pour générer des courbes de vitesse. Vous pouvez utiliser vos propres valeurs dans cette fonction, ou des valeurs prédéfinies :
linéaire : La vitesse de l'animation est la même du début à la fin.
facilité : Valeur par défaut. L'animation démarre à une vitesse lente, puis s'accélère, puis ralentit avant de se terminer.
ease-in : L'animation démarre à faible vitesse.
ease-out : L'animation se termine à faible vitesse.
facilité d'entrée : l'animation démarre et se termine à une vitesse lente.
cubic-bezier(n,n,n,n) : sa propre valeur dans la fonction cubique-bezier. Les valeurs possibles sont des valeurs numériques de 0 à 1.
Remarque : Internet Explorer 9 et versions antérieures ne prennent pas en charge l'attribut animation-timing-function.
Exemple d'utilisation de l'attribut CSS3 animation-timing-function
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-timing-function:linear;
/* Safari and Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-timing-function:linear;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendu :
Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!