communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > Comment animer un motif de remplissage en utilisant CSS

Comment animer un motif de remplissage en utilisant CSS

王林

Libérer： 2023-09-04 08:09:02

avant

1423 Les gens l'ont consulté

如何使用 CSS 设置动画的填充模式

Pour animer le mode de remplissage en utilisant CSS, utilisez la propriété animation-fill-mode. Il a des valeurs avant, arrière et bidirectionnelles.

Vous pouvez essayer d'exécuter le code suivant pour définir le mode de remplissage de l'animation

Exemple

Démo en ligne

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background: red;
            animation-name: myanim;
            animation-duration: 2s;
            animation-fill-mode: forwards;
         }
         @keyframes myanim {
            from {left: 0px; background-color: green;}
            to {left: 200px; background-color: blue;}
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

Copier après la connexion

;

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!

source：tutorialspoint.com

Article précédent：Premiers pas avec l'utilitaire de titre de typographie CSS Article suivant：Sélecteurs génériques (*, ^ et $) en CSS pour les classes

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

Derniers articles par auteur