Maison > Article > interface Web > Comment rendre l'animation CSS à vitesse constante
Comment rendre l'animation CSS à vitesse constante
- 醉折花枝作酒筹original
- 2021-07-14 13:34:038223parcourir
En CSS, vous pouvez utiliser l'attribut transition-timing-function pour définir l'animation à une vitesse constante. Il vous suffit d'ajouter le style "transition-timing-function:linear;"
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
facilité :
1, facilité : (ralentir progressivement) valeur par défaut
2, linéaire : (vitesse constante)
3, facilité d'entrée : (accélérer)
4, facilité de sortie : (ralentir)
5. easy-in-out : (accélérer puis décélérer)
6. cubique-bezier
Tel que :
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding: 0;}
.icon_down{ width: 0; height: 0; border-left:20px solid transparent; border-right: 20px solid transparent; border-top:20px solid #B03939; transition: all .1s ease-in 0ms; margin:50px auto; cursor: pointer; }
.icon_down:hover{ transform: rotate(180deg);}
</style></head><body>
<p class="icon_down"></p></body></html>Rendu : la souris pivote de 180 degrés,
Exemple 2 :
Lorsque le pointeur de la souris est placé sur l'élément p, sa largeur passera progressivement de 100px à 300px :
p
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}Rendu :
Après le passage de la souris
Apprentissage recommandé : Tutoriel vidéo CSS
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!