Qu'est-ce qui est utilisé pour définir le moment de l'animation de transition en CSS3-Questions et réponses frontales-php.cn

Qu'est-ce qui est utilisé pour définir le moment de l'animation de transition en CSS3

青灯夜游

Libérer： 2022-02-28 13:35:37

original

5118 Les gens l'ont consulté

En CSS3, vous pouvez utiliser l'attribut transition-duration pour définir la durée de l'animation de transition. Cet attribut peut spécifier le temps nécessaire pour terminer l'effet de transition (en secondes ou millisecondes). : temps;".

Qu'est-ce qui est utilisé pour définir le moment de l'animation de transition en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS3, vous pouvez utiliser l'attribut transition-duration pour définir l'heure de l'animation de transition.

Introduction à la transition

La transition présente une transition, un processus de conversion d'animation, tel que le fondu d'entrée, le fondu de sortie, la vitesse d'animation, etc.

La fonction de transition de la transition CSS3 ressemble plus à du "beurre", déclenchant une transition en douceur des styles grâce à quelques actions CSS simples.

1. Propriété de transition (transition-property) Définit le nom de la propriété CSS de l'animation de transition

IDENT : Propriétés CSS spécifiées (propriétés de largeur, de hauteur, de couleur d'arrière-plan, etc.)

all : Spécifie que tous les éléments support transition-property Le style de l'attribut est généralement utilisé pour des raisons de commodité.2. Le temps requis pour la transition (transition-duration) définit la durée de l'animation de transition, c'est-à-dire le temps nécessaire entre la définition de l'ancien attribut et le remplacement de l'attribut. nouvel attribut, l'unité est Secondes (s)

3. Fonction d'animation de transition (transition-timing-function)

Spécifiez la vitesse de transition du navigateur et la progression de l'opération pendant la transition. animation en ajoutant une fonction à la transition

Animations de transition communes

linéaire : vitesse constante (mouvement uniforme) ease -in : la vitesse devient de plus en plus rapide Rapide (effet de fondu) ease-out : la vitesse devient de plus en plus lente (effet de fondu) ease-in-out : la vitesse accélère d'abord puis ralentit (effet de fondu)

ease : vitesse de rapide à lente (valeur par défaut)




4. Temps de retard de transition (transition-delay)

Spécifiez l'heure à laquelle une animation commence à s'exécuter et combien de temps il faut pour exécuter l'effet de transition après avoir modifié l'attribut de l'élément. value

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>transition-property的使用</title>
    <style>
        div{
            background-color: red;
            width: 200px;
            height: 200px;
            /*指定动画过渡的CSS属性 过渡时间 过渡动画 延迟时间*/
            transition:  background-color 2s ease-in-out 3s;
            -moz-transition:  background-color 2s ease-in-out 3s;
            -webkit-transition:  background-color 2s ease-in-out 3s;
            -o-transition:  background-color 2s ease-in-out 3s;
        }
        div:hover{
            background-color: yellow;

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copier après la connexion

S'il n'y a pas d'effet de mouvement de la souris pour déclencher la transition, en fait, le div le fera ne change pas du tout. Le survol de la pseudo-classe est une sorte de mécanisme de transition déclencheur. Quelles autres méthodes de déclenchement existe-t-il ?

Déclenchement de pseudo-classe : :hover, :active, :focus, vérifié, etc.