A quoi sert l'attribut animation-timing-function ?-tutoriel CSS-php.cn

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

青灯夜游

Libérer： 2019-01-31 11:01:33

original

3875 Les gens l'ont consulté

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.

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

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;

Copier après la connexion

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>

Copier après la connexion

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!