Maison > Article > interface Web > Comment rendre l'animation CSS à vitesse constante
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!