Comment empêcher l'animation de rebondir en CSS3-Questions et réponses frontales-php.cn

Table des matières

Comment empêcher l'animation de rebondir en CSS3

Maison

interface Web

Questions et réponses frontales

Comment empêcher l'animation de rebondir en CSS3

Jan 24, 2022 am 10:57 AM

css

En CSS3, vous pouvez utiliser l'attribut "animation-fill-mode" pour définir l'animation sans rebond. Cet attribut est utilisé pour spécifier s'il faut conserver l'effet d'animation avant ou après la lecture de l'animation. mode de remplissage : forwards ;".

Comment empêcher l'animation de rebondir en CSS3

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

Comment empêcher l'animation de rebondir en CSS3

Afin d'obtenir une animation qui ne rebondit pas en CSS, vous devez utiliser l'attribut animation-fill-mode. L'attribut

animation-fill-mode spécifie si l'effet d'animation est visible avant ou après la lecture de l'animation.

Remarque : Sa valeur d'attribut est un ou plusieurs mots-clés de motif de remplissage séparés par des virgules.

La syntaxe est :

animation-fill-mode : none | forwards | backwards | both;

Copier après la connexion

Les valeurs possibles sont :

Comment empêcher lanimation de rebondir en CSS3

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            margin:0 auto;
            background-color:pink;
            animation:fadenum 5s;
            animation-fill-mode:forwards;
        }
        @keyframes fadenum{
   100%{width:300px;}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copier après la connexion

Le résultat de sortie :

Comment empêcher lanimation de rebondir en CSS3

(Partage vidéo d'apprentissage : 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 de ce site Web

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