Comment obtenir un effet d'animation en changeant de largeur en CSS3-tutoriel CSS-php.cn

Comment obtenir un effet d'animation en changeant de largeur en CSS3

WBOY

Libérer： 2021-12-15 12:12:56

original

7244 Les gens l'ont consulté

Méthode : 1. Utilisez l'instruction "element {animation: name time}" pour lier l'animation à l'élément ; 2. Utilisez l'instruction "@keyframes name {100%{width: width value;}}" pour définir l'animation. pour que l'élément change de largeur. Action, pour obtenir l'effet d'animation de l'élément changeant de largeur.

Comment obtenir un effet d'animation en changeant de largeur en CSS3

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

Comment obtenir l'effet d'animation en modifiant la largeur de CSS3

En CSS, vous pouvez utiliser l'attribut d'animation et la règle @keyframes pour obtenir l'effet d'animation en modifiant la largeur de l'élément via les @keyframes. règle, vous pouvez créer une animation.

Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation.

Spécifiez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

Utilisez l'attribut width pour définir l'action d'animation. Cette propriété est utilisée pour définir la largeur de l'élément. Le format de syntaxe de l'attribut

animation est le suivant :

animation: name duration timing-function delay iteration-count direction;

Copier après la connexion

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;
        }
        @keyframes fadenum{
   100%{width:300px;}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment obtenir un effet danimation en changeant de largeur en CSS3