Heim > Artikel > Web-Frontend > So animieren Sie ein Füllmuster mit CSS

So animieren Sie ein Füllmuster mit CSS

王林nach vorne: 2023-09-04 08:09:021333Durchsuche

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

Um den Füllmodus mithilfe von CSS zu animieren, verwenden Sie die Eigenschaft animation-fill-mode. Es gibt Vorwärts-, Rückwärts- und bidirektionale Werte.

Sie können versuchen, den folgenden Code auszuführen, um den Füllmodus der Animation festzulegen

Beispiel

Online-Demo

<!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>

Das obige ist der detaillierte Inhalt vonSo animieren Sie ein Füllmuster mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Erste Schritte mit dem CSS Typography Title UtilityNächster Artikel：Erste Schritte mit dem CSS Typography Title Utility

In Verbindung stehende Artikel

Mehr sehen