Maison > Article > interface Web > A quoi sert l'attribut animation-timing-function ?

A quoi sert l'attribut animation-timing-function ?

青灯夜游original: 2019-01-31 11:01:333847parcourir

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 :

A quoi sert lattribut animation-timing-function ?

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!

php css css3 function animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：A quoi sert l'attribut animation-duration ?Article suivant：A quoi sert l'attribut animation-duration ?

Articles Liés

Voir plus