Maison  >  Article  >  interface Web  >  Comment rendre l'animation CSS à vitesse constante

Comment rendre l'animation CSS à vitesse constante

醉折花枝作酒筹
醉折花枝作酒筹original
2021-07-14 13:34:038201parcourir

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;"

Comment rendre l'animation CSS à vitesse constante

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!

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:Que peut faire CSS ?Article suivant:Que peut faire CSS ?