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

王林
王林avant
2023-09-08 19:13:021014parcourir

设置动画未播放时元素的 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>

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:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer