communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Français

Maison > interface Web > tutoriel CSS > Définir le style CSS de l'élément lorsque l'animation n'est pas en cours de lecture

Définir le style CSS de l'élément lorsque l'animation n'est pas en cours de lecture

王林

Libérer： 2023-09-08 19:13:02

avant

1060 Les gens l'ont consulté

设置动画未播放时元素的 CSS 样式

Utilisez l'attribut animation-fill-mode pour définir le style de l'élément lorsque l'animation n'est pas en cours de lecture

Exemple

Démonstration en direct

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background: red;
            animation-name: myanim;
            animation-duration: 2s;
            animation-fill-mode: backwards;
         }
         @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!

Article précédent：Compétences en conception Web et partage d'expériences pratiques basées sur CSS3 Article suivant：Comment utiliser la fonctionnalité flex de CSS3 pour optimiser l'effet de mise en page des pages Web ?

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